E-commerce (products) UI Components – Shopky Library

<section class="py-24">
    <div class="container mx-auto px-4">
        <h1 class="font-heading uppercase text-center text-7xl md:text-9xl mb-14">new couple collection</h1>
        <div class="flex flex-wrap justify-center mb-14 -m-2">
            <div class="w-full sm:w-1/2 lg:w-auto p-2">
                <a href="#" class="border border-gray-900 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 px-7 h-14 flex items-center justify-center transition duration-200">
                    <span class="text-3xl font-heading uppercase">ALL</span>
                </a>
            </div>
            <div class="w-full sm:w-1/2 lg:w-auto p-2">
                <a href="#" class="border border-gray-900 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 px-7 h-14 flex items-center justify-center transition duration-200">
                    <span class="text-3xl font-heading uppercase">women’s</span>
                </a>
            </div>
            <div class="w-full sm:w-1/2 lg:w-auto p-2">
                <a href="#" class="border border-gray-900 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 px-7 h-14 flex items-center justify-center transition duration-200">
                    <span class="text-3xl font-heading uppercase">man’s</span>
                </a>
            </div>
            <div class="w-full sm:w-1/2 lg:w-auto p-2">
                <a href="#" class="bg-black rounded-full hover:bg-gray-900 focus:ring-4 focus:ring-gray-200 px-7 h-14 flex items-center justify-center transition duration-200">
                    <span class="text-3xl text-white font-heading uppercase">t-shirt</span>
                </a>
            </div>
            <div class="w-full sm:w-1/2 lg:w-auto p-2">
                <a href="#" class="border border-gray-900 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 px-7 h-14 flex items-center justify-center transition duration-200">
                    <span class="text-3xl font-heading uppercase">SUITS</span>
                </a>
            </div>
            <div class="w-full sm:w-1/2 lg:w-auto p-2">
                <a href="#" class="border border-gray-900 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 px-7 h-14 flex items-center justify-center transition duration-200">
                    <span class="text-3xl font-heading uppercase">crewneck</span>
                </a>
            </div>
            <div class="w-full sm:w-1/2 lg:w-auto p-2">
                <a href="#" class="border border-gray-900 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 px-7 h-14 flex items-center justify-center transition duration-200">
                    <span class="text-3xl font-heading uppercase">jacket</span>
                </a>
            </div>
            <div class="w-full sm:w-1/2 lg:w-auto p-2">
                <a href="#" class="border border-gray-900 rounded-full hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 px-7 h-14 flex items-center justify-center transition duration-200">
                    <span class="text-3xl font-heading uppercase">hoodie</span>
                </a>
            </div>
        </div>
        <div class="flex flex-wrap -m-4">
            <div class="w-full md:w-1/2 lg:w-1/3 p-4">
                <a href="#" class="group">
                    <div class="overflow-hidden rounded-2xl mb-4" style="height:480px;">
                        <img class="rounded-2xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/new-arrival/product10.png" alt="">
                    </div>
                    <p class="text-2xl font-semibold text-gray-500 mb-2">T-shirt</p>
                    <div class="flex justify-between items-end flex-wrap gap-2">
                        <h2 class="font-heading text-5xl">name dummy</h2>
                        <p class="text-red-700 text-3xl font-semibold">$145.00</p>
                    </div>
                </a>
            </div>
            <div class="w-full md:w-1/2 lg:w-1/3 p-4">
                <a href="#" class="group">
                    <div class="overflow-hidden rounded-2xl mb-4" style="height:480px;">
                        <img class="rounded-2xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/featured/picture1.png" alt="">
                    </div>
                    <p class="text-2xl font-semibold text-gray-500 mb-2">T-shirt</p>
                    <div class="flex justify-between items-end flex-wrap gap-2">
                        <h2 class="font-heading text-5xl">name dummy</h2>
                        <p class="text-red-700 text-3xl font-semibold">$145.00</p>
                    </div>
                </a>
            </div>
            <div class="w-full md:w-1/2 lg:w-1/3 p-4">
                <a href="#" class="group">
                    <div class="overflow-hidden rounded-2xl mb-4" style="height:480px;">
                        <img class="rounded-2xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/new-arrival/product11.png" alt="">
                    </div>
                    <p class="text-2xl font-semibold text-gray-500 mb-2">T-shirt</p>
                    <div class="flex justify-between items-end flex-wrap gap-2">
                        <h2 class="font-heading text-5xl">name dummy</h2>
                        <p class="text-red-700 text-3xl font-semibold">$145.00</p>
                    </div>
                </a>
            </div>
            <div class="w-full md:w-1/2 lg:w-1/3 p-4">
                <a href="#" class="group">
                    <div class="overflow-hidden rounded-2xl mb-4" style="height:480px;">
                        <img class="rounded-2xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/headers/picture1.png" alt="">
                    </div>
                    <p class="text-2xl font-semibold text-gray-500 mb-2">T-shirt</p>
                    <div class="flex justify-between items-end flex-wrap gap-2">
                        <h2 class="font-heading text-5xl">name dummy</h2>
                        <p class="text-red-700 text-3xl font-semibold">$145.00</p>
                    </div>
                </a>
            </div>
            <div class="w-full md:w-1/2 lg:w-1/3 p-4">
                <a href="#" class="group">
                    <div class="overflow-hidden rounded-2xl mb-4" style="height:480px;">
                        <img class="rounded-2xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/categories/product1.png" alt="">
                    </div>
                    <p class="text-2xl font-semibold text-gray-500 mb-2">T-shirt</p>
                    <div class="flex justify-between items-end flex-wrap gap-2">
                        <h2 class="font-heading text-5xl">name dummy</h2>
                        <p class="text-red-700 text-3xl font-semibold">$145.00</p>
                    </div>
                </a>
            </div>
            <div class="w-full md:w-1/2 lg:w-1/3 p-4">
                <a href="#" class="group">
                    <div class="overflow-hidden rounded-2xl mb-4" style="height:480px;">
                        <img class="rounded-2xl object-cover w-full h-full transform group-hover:scale-105 transition duration-200" src="shopky-assets/categories/product2.png" alt="">
                    </div>
                    <p class="text-2xl font-semibold text-gray-500 mb-2">T-shirt</p>
                    <div class="flex justify-between items-end flex-wrap gap-2">
                        <h2 class="font-heading text-5xl">name dummy</h2>
                        <p class="text-red-700 text-3xl font-semibold">$145.00</p>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>