Product

<div class="w-full">
    <section class="relative">
       <div class="container mx-auto px-4">
          <div class="mb-12 flex flex-wrap -mx-4 justify-end">
             <div class="px-4 relative w-full lg:w-8/12 text-right">
                <h6 class="mb-2 text-lg font-bold uppercase text-red-500">Have you seen us?</h6>
                <h2 class="text-4xl font-bold mt-0 mb-1 text-blueGray-700">The latest accessories</h2>
                <p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">The time is now for it to be okay to be great. People in this world shun people for being great.</p>
             </div>
          </div>
          <div class="flex flex-wrap -mx-4">
             <div class="mx-auto px-4 relative w-full lg:w-6/12 w-full md:w-full">
                <div class="relative">
                   <div class="relative w-full overflow-hidden">
                      <div class="w-full p-12 transform duration-500 transition-all ease-in-out mx-auto block"><img alt="..." src="https://demos.creative-tim.com/notus-pro-react/static/media/shirt.cab37b31.png" class="w-full h-auto mx-auto"></div>
                      <div class="w-full p-12 transform duration-500 transition-all ease-in-out mx-auto hidden"><img alt="..." src="https://demos.creative-tim.com/notus-pro-react/static/media/shorts.2d9699b3.png" class="w-full h-auto mx-auto"></div>
                      <div class="w-full p-12 transform duration-500 transition-all ease-in-out mx-auto hidden"><img alt="..." src="https://demos.creative-tim.com/notus-pro-react/static/media/tshirt.4b010bd4.png" class="w-full h-auto mx-auto"></div>
                   </div>
                   <a href="javascript:;" class="absolute z-1 top-0 bottom-0 flex items-center justify-center w-1/6 text-white text-center opacity-75 hover:opacity-100 transition-opacity duration-150 ease-linear left-0">
                     <i class="text-sm bg-orange-500 rounded-full fas fa-chevron-left flex items-center justify-center w-8 h-8 p-2"></i>
                     <span class="sr-only">Previous</span>
                   </a>
                   <a href="javascript:;" class="absolute z-1 top-0 bottom-0 flex items-center justify-center w-1/6 text-white text-center opacity-75 hover:opacity-100 transition-opacity duration-150 ease-linear right-0">
                     <i class="text-sm bg-orange-500 rounded-full fas fa-chevron-right flex items-center justify-center w-8 h-8 p-2"></i>
                     <span class="sr-only">Next</span>
                   </a>
                </div>
             </div>
             <div class="mr-auto px-4 relative w-full lg:w-6/12 w-full md:w-full">
                <h2 class="text-3xl font-bold leading-tight mt-0 mb-0">Givenchy</h2>
                <div class="pt-2">
                   <div class="text-orange-500"><i class="mr-1 fas fa-star"></i><i class="mr-1 fas fa-star"></i><i class="mr-1 fas fa-star"></i><i class="mr-1 fas fa-star"></i><i class="mr-1 fas fa-star-half-alt"></i><a href="https://www.creative-tim.com" class="inline text-sm ml-1 text-blueGray-700 hover:text-blueGray-500">(76 customer reviews)</a></div>
                </div>
                <h2 class="text-3xl font-normal mt-2 mb-2">$3,390</h2>
                <p class="text-blueGray-500">Eres daring swimsuit has the fit and coverage of a bikini in a one-piece silhouette. This fuchsia style is crafted from the label's sculpting peau douce fabric and has flattering cutouts through the torso and back. Wear yours with mirrored sunglasses on vacation.</p>
                <div class="mt-12 mb-6 flex flex-wrap -mx-4">
                   <div class="px-4 relative w-full lg:w-6/12">
                      <label class="inline-block mb-2">Color</label>
                      <div class="relative">
                         <div class="mb-3 pt-0"><input placeholder="Select color" type="text" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 " value=""></div>
                         <div class="hidden z-50">
                            <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Blue</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Green</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Teal</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Red</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Orange</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">White</a></div>
                         </div>
                      </div>
                   </div>
                   <div class="px-4 relative w-full lg:w-6/12">
                      <label class="inline-block mb-2">Size</label>
                      <div class="relative">
                         <div class="mb-3 pt-0"><input placeholder="Select size" type="text" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 " value=""></div>
                         <div class="hidden z-50">
                            <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">XS</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">S</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">M</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">L</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">XL</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">XXL</a></div>
                         </div>
                      </div>
                   </div>
                </div>
                <div class="mb-6 flex flex-wrap -mx-4">
                   <div class="px-4 relative w-full lg:w-5/12">
                      <label class="inline-block mb-2">Quantity</label>
                      <div class="relative inline-flex flex-row w-full items-stretch">
                         <div class="mr-2"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-orange-500 border-orange-500 active:bg-orange-600 active:border-orange-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md"><i class="fas fa-minus"></i></button></div>
                         <div class="mr-2">
                            <div class="mb-3 pt-0"><input type="text" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 " value="1"></div>
                         </div>
                         <div><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-orange-500 border-orange-500 active:bg-orange-600 active:border-orange-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md"><i class="fas fa-plus"></i></button></div>
                      </div>
                   </div>
                </div>
                <button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-orange-500 border-orange-500 active:bg-orange-600 active:border-orange-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Add to Cart <i class="fas fa-shopping-cart"></i></button>
             </div>
          </div>
       </div>
    </section>
 </div>