Image Nike Categories - Tailwind Component
The Category page is the bridge between your homepage and product pages, it is made with Tailwind CSS
image
Loading component...
77 lines
<div class="flex justify-center items-center">
<div class="2xl:mx-auto 2xl:container py-12 px-4 sm:px-6 xl:px-20 2xl:px-0 w-full">
<div class="flex flex-col jusitfy-center items-center space-y-10">
<h1 class="font-bold text-5xl">Product Categories</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-4 md:gap-x-8 w-full">
<div class="relative group flex justify-center items-center h-full w-full">
<img class="object-center object-cover h-full w-full"
src="https://images.unsplash.com/photo-1588117260148-b47818741c74?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
alt="Photo by Mike Von on Unsplash" />
<button
class="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 bottom-4 z-10 absolute text-base font-medium leading-none text-gray-800 rounded py-3 w-36 bg-gray-200">Women's</button>
<div
class="absolute opacity-0 group-hover:opacity-100 transition duration-500 bottom-3 py-6 z-0 px-20 w-36 bg-white bg-opacity-50">
</div>
</div>
<div class="flex flex-col space-y-4 md:space-y-8 mt-4 md:mt-0">
<div class="relative group flex justify-center items-center h-full w-full">
<img class="object-center object-cover h-full w-full"
src="https://images.unsplash.com/photo-1527289631404-6b929d0a126f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGtpZCUyMG5pa2V8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=80"
alt="Kid image" />
<button
class="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 bottom-4 z-10 absolute text-base font-medium leading-none text-gray-800 py-3 w-36 bg-gray-200 rounded">Kids'</button>
<div
class="absolute opacity-0 group-hover:opacity-100 transition duration-500 bottom-3 py-6 z-0 px-20 w-36 bg-white bg-opacity-50">
</div>
</div>
<div class="relative group flex justify-center items-center h-full w-full">
<img class="object-center object-cover h-full w-full"
src="https://static.nike.com/a/images/w_960,c_limit,f_auto/5bcd7865-061c-4695-8288-dcd6bfb0409f/snkrs-special-air-max-1.jpg"
alt="watch-image" />
<button
class="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 bottom-4 z-10 absolute text-base font-medium leading-none text-gray-800 py-3 w-36 rounded bg-gray-200">SNKRS</button>
<div
class="absolute opacity-0 group-hover:opacity-100 transition duration-500 bottom-3 py-6 z-0 px-20 w-36 bg-gray-200 bg-opacity-50">
</div>
</div>
</div>
<div class="relative group justify-center items-center h-full w-full hidden lg:flex">
<img class="object-center object-cover h-full w-full"
src="https://images.unsplash.com/photo-1606105961732-6332674f4ee6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDN8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
alt="Photo by Tyrell James on Unsplash" />
<button
class="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 bottom-4 z-10 absolute text-base font-medium leading-none text-gray-800 py-3 w-36 bg-gray-200 rounded-lg">Men'</button>
<div
class="absolute opacity-0 group-hover:opacity-100 transition duration-500 bottom-3 py-6 z-0 px-20 w-36 bg-gray-200 rounded-lg bg-opacity-50">
</div>
</div>
<div class="relative group flex justify-center items-center h-full w-full mt-4 md:hidden md:mt-8 lg:hidden">
<img class="object-center object-cover h-full w-full hidden md:block"
src="https://images.unsplash.com/photo-1606105961732-6332674f4ee6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDN8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
alt="Photo by Tyrell James on Unsplash" />
<img class="object-center object-cover h-full w-full md:hidden"
src="https://images.unsplash.com/photo-1606106040060-3c4322aaecda?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
alt="olive-tatiane-Im-Ez-F9-B91-Mk-unsplash-2" />
<button
class="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 bottom-4 z-10 absolute text-base font-medium leading-none text-gray-800 py-3 w-36 bg-gray-200 rounded-lg">Men'</button>
<div
class="absolute opacity-0 group-hover:opacity-100 transition duration-500 bottom-3 py-6 z-0 px-20 w-36 bg-white bg-opacity-50">
</div>
</div>
</div>
<div class="relative group hidden md:flex justify-center items-center h-full w-full mt-4 md:mt-8 lg:hidden">
<img class="object-center object-cover h-full w-full hidden md:block"
src="https://images.unsplash.com/photo-1606105961732-6332674f4ee6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDN8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
alt="Photo by Tyrell James on Unsplash" />
<img class="object-center object-cover h-full w-full sm:hidden"
src="https://images.unsplash.com/photo-1606106040060-3c4322aaecda?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
alt="olive-tatiane-Im-Ez-F9-B91-Mk-unsplash-2" />
<button
class="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 bottom-4 z-10 absolute text-base font-medium leading-none text-gray-800 py-3 w-36 bg-white">Men'</button>
<div
class="absolute opacity-0 group-hover:opacity-100 transition duration-500 bottom-3 py-6 z-0 px-20 w-36 bg-white bg-opacity-50">
</div>
</div>
</div>
</div>
</div>