Product List Happysocks - Tailwind Component
A layouts Product List by Happysocks website, it is made with Tailwind CSS.
layouts
Loading component...
104 lines
<section>
<div class="py-20 bg-gray-50 radius-for-skewed">
<div class="container mx-auto px-4">
<div
class="flex flex-row justify-between w-full mb-14 border-t-2 border-b-2 py-5 px-8 text-lg font-medium border-gray-700">
<div>
<p>Mini & Me | Matching prints for the whole family</p>
</div>
<div>
<button class="text-lg font-medium inline-flex items-center hover:underline">Show More
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-4" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<div class="flex flex-wrap items-center">
<div class="w-full lg:w-1/2 mb-12 lg:mb-0">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 sm:px-0">
<div class="block overflow-hidden group">
<div
class="shadow-[0_4px_0_0_rgba(0,0,0,1)] border-2 border-black rounded-3xl overflow-hidden mx-auto justify-center items-center flex py-4">
<img class="group-hover:scale-105 transition-transform duration-500 object-cover w-52"
src="https://media.happysocks.com/catalog/product/m/a/magentoimage_my8mlxdouryfyuns.png"
alt="Basic Tee Product" />
</div>
<div class="relative pt-4 text-center">
<h3 class="group-hover:underline font-medium tracking-wider group-hover:underline-offset-4">
Bunana Break Sock
</h3>
<p>14.00 GBP</p>
</div>
</div>
<div class="block overflow-hidden group">
<div
class="shadow-[0_4px_0_0_rgba(0,0,0,1)] border-2 border-black rounded-3xl overflow-hidden mx-auto justify-center items-center flex py-4">
<img class="group-hover:scale-105 transition-transform duration-500 object-cover w-52"
src="https://media.happysocks.com/catalog/product/m/a/magentoimage_ld6001p8bu9d6esg.png"
alt="Basic Tee Product" />
</div>
<div class="relative pt-4 text-center">
<h3 class="group-hover:underline font-medium tracking-wider group-hover:underline-offset-4">
Bunny Sock
</h3>
<p>14.00 GBP</p>
</div>
</div>
<div class="block overflow-hidden group">
<div
class="shadow-[0_4px_0_0_rgba(0,0,0,1)] border-2 border-black rounded-3xl overflow-hidden mx-auto justify-center items-center flex py-4">
<img class="group-hover:scale-105 transition-transform duration-500 object-cover w-52"
src="https://media.happysocks.com/catalog/product/h/t/httpsasset.productmarketingcloud.comapiassetstorage233_c6833ec2-691f-4f8c-8f8a-a3ecbbe00f70magentoimage.png"
alt="Basic Tee Product" />
</div>
<div class="relative pt-4 text-center">
<h3 class="group-hover:underline font-medium tracking-wider group-hover:underline-offset-4">
Cherry Sock
</h3>
<p>14.00 GBP</p>
</div>
</div>
<div class="block overflow-hidden group">
<div
class="shadow-[0_4px_0_0_rgba(0,0,0,1)] border-2 border-black rounded-3xl overflow-hidden mx-auto justify-center items-center flex py-4">
<img class="group-hover:scale-105 transition-transform duration-500 object-cover w-52"
src="https://media.happysocks.com/catalog/product/h/t/httpsasset.productmarketingcloud.comapiassetstorage233_c64e8cdb-d11b-4566-89f1-eda3a34037d0magentoimage.png"
alt="Basic Tee Product" />
</div>
<div class="relative pt-4 text-center">
<h3 class="group-hover:underline font-medium tracking-wider group-hover:underline-offset-4">
Big Dot Sock
</h3>
<p>14.00 GBP</p>
</div>
</div>
</div>
</div>
<div class="w-full lg:w-1/2 px-4 lg:-mt-16">
<div class="relative group">
<img src="https://a.storyblok.com/f/54304/1400x1680/f879ef5c1b/ss22_minime_webb_collectionimage.jpg"
alt="Colorful frame. A child in blue socks. Big feet in matching blue socks"
class="w-full rounded shadow-xl hover:shadow-2xl" />
<img class="absolute top-0" src="https://a.storyblok.com/f/54304/x/af86e6fc33/ss22_minime_overlay.svg"
alt="matching">
<button
class="absolute bottom-8 sm:text-xl font-semibold left-1/2 sm:left-52 sm:px-12 sm:py-3 py-2 px-6 border-b-8 border-l-2 shadow-lg bg-white border-black text-black">
Show All
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
body {
font-family: 'Space Mono', monospace;
}
</style>