PresentationSections
Product
Product
Copied
Have you seen us?
The latest accessories
The time is now for it to be okay to be great. People in this world shun people for being great.
Givenchy
$3,390
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.
<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>