Search box - Intro colorful background

xxxxxxxxxx
 
<template>
  <section class="intro">
    <div class="bg-image vh-100" style="
          background-color: rgb(167, 152, 239);
        ">
      <div class="mask d-flex align-items-center h-100">
        <MDBContainer>
          <MDBCard>
            <MDBCardBody class="p-4">
              <MDBRow>
                <MDBCol col="12">
                  <MDBInput v-model="inputValue" inputGroup="lg" placeholder="Enter keywords?" class="form-control-lg">
                    <template #prepend>
                      <MDBDropdown v-model="dropdown1">
                        <MDBDropdownToggle tag="a" color="white" class="input-group-text text-body" @click="dropdown1 = !dropdown1">Categories</MDBDropdownToggle>
                        <MDBDropdownMenu>
                          <MDBDropdownItem href="#">Accessories</MDBDropdownItem>
                          <MDBDropdownItem href="#">Clothing</MDBDropdownItem>
                          <MDBDropdownItem href="#">Footwear</MDBDropdownItem>
                          <MDBDropdownItem href="#">Ladies</MDBDropdownItem>
                          <MDBDropdownItem href="#">Men</MDBDropdownItem>
                          <MDBDropdownItem href="#">New Arrivals</MDBDropdownItem>
                          <MDBDropdownItem href="#">Sale</MDBDropdownItem>
                        </MDBDropdownMenu>
                      </MDBDropdown>
                    </template>
                    <MDBBtn color="success px-4 rounded-right">
                      <i class="fas fa-search" style="font-size: 0.75rem"></i>
                    </MDBBtn>
                  </MDBInput>
                </MDBCol>
              </MDBRow>
            </MDBCardBody>
          </MDBCard>
        </MDBContainer>
      </div>
    </div>
  </section>
</template>

xxxxxxxxxx
 
<style>#app {
    font-family: Roboto, Helvetica, Arial, sans-serif;
}
​
.rounded-right {
  border-top-right-radius: 0.3rem !important;
  border-bottom-right-radius: 0.3rem !important;
}
​
html,
body,
.intro {
    height: 100%;
}
​
.form-outline .form-control:focus~.form-notch .form-notch-leading {
    border-top: 0.125rem solid #00b74a;
    border-bottom: 0.125rem solid #00b74a;
    border-left: 0.125rem solid #00b74a;
}
​
.form-outline .form-control:focus~.form-notch .form-notch-middle {
    border-color: #00b74a;
}
​
.form-outline .form-control:focus~.form-notch .form-notch-trailing {
    border-top: 0.125rem solid #00b74a;
    border-bottom: 0.125rem solid #00b74a;
    border-right: 0.125rem solid #00b74a;
}
​
.form-outline .form-control:focus~.form-label {
    color: #00b74a;
}
​
.autocomplete-input.focused~.form-notch .form-notch-leading {
    border-top: 2px solid #00b74a;
    border-bottom: 2px solid #00b74a;
    border-left: 2px solid #00b74a;
    transition: all 0.2s linear;
}
​
.autocomplete-input.focused~.form-notch .form-notch-middle {
    border-color: #00b74a;
}
​
.autocomplete-input.focused~.form-notch .form-notch-trailing {
    border-color: #00b74a;
}
​
.autocomplete-input.focused~.autocomplete-label {
    color: #00b74a;
}
​
</style>

xxxxxxxxxx
 
<script>
    import {
        MDBContainer,
        MDBCard,
        MDBCardBody,
        MDBRow,
        MDBCol,
        MDBInput,
        MDBDropdown,
        MDBDropdownToggle,
        MDBDropdownMenu,
        MDBDropdownItem,
        MDBBtn
    } from "mdb-vue-ui-kit";
​
import { ref } from "vue"
​
export default {
    name: "App",
    components: {
        MDBContainer,
        MDBCard,
        MDBCardBody,
        MDBRow,
        MDBCol,
        MDBInput,
        MDBDropdown,
        MDBDropdownToggle,
        MDBDropdownMenu,
        MDBDropdownItem,
        MDBBtn
    },
  setup() {
    const inputValue = ref("");
    const dropdown1 = ref(false)
    
    return { inputValue, dropdown1 }
  }
};
</script>

Console errors: 0