Tailwind Card Design
Discover stunning Tailwind card design inspirations and tips for creating visually captivating and functional cards. Perfect for business, social media, websites, and more!
All Images use in this website for showing purpose only, if you want to use in your business website please purchase it.
Preview
Current Job Openings
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus magni tenetur maxime, maiores.
Apply for job web development
PHP/Laravel Developer
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Show Code
<div class="max-w-7xl mx-auto px-4 lg:px-0 py-12">
<h3 class="mb-4 text-3xl font-bold md:text-[40px] md:leading-[54px] text-balance">
Current Job Openings
</h3>
<p class="font-normal text-gray-600">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus magni tenetur maxime, maiores.
</p>
<a href="/" class="bg-emerald-800 text-white px-4 py-2 mt-6 rounded-full inline-flex">Apply for job</a>
<div class="grid md:grid-cols-2 gap-6 mt-12">
<div class="rounded-2xl border-2 border-gray-200 py-8 px-6 shadow-sm">
<span class="rounded-full bg-emerald-900 px-5 py-2 font-light text-sm uppercase text-white">web development</span>
<h3 class="mt-8 text-xl font-bold">
PHP/Laravel Developer
</h3>
<p class="mt-2.5 text-gray-600 md:line-clamp-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="mt-7 items-center justify-between sm:flex">
<div class="flex items-center gap-2.5">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" class="fill-gray-600" viewBox="0 0 256 256">
<path d="M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z"></path>
</svg>
<p class="font-normal text-gray-600">
Los Angeles, California
</p>
</div>
<div class="mt-5 flex items-center gap-4 sm:mt-0">
<button type="button" class="flex items-center text-nowrap gap-2.5 rounded-full border hover:bg-black hover:text-white transition duration-200 border-gray-200 px-4 py-3">
Full Time
</button>
<a href="/" class="group flex h-12 w-12 border border-gray-200 items-center rounded-full justify-center duration-200 transition hover:bg-black">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.9753 1.02471L1 17M16.4376 11.7149C15.1481 10.4254 12.4997 5.50033 17 0.999999C12.4997 5.50033 7.5746 2.8519 6.28505 1.56235" stroke="#07D673" stroke-width="2"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="rounded-2xl border-2 border-gray-200 py-8 px-6 shadow-sm">
<span class="rounded-full bg-emerald-900 px-5 py-2 font-light text-sm uppercase text-white">web development</span>
<h3 class="mt-8 text-xl font-bold">
UI/UX Designer
</h3>
<p class="mt-2.5 text-gray-600 md:line-clamp-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="mt-7 items-center justify-between sm:flex">
<div class="flex items-center gap-2.5">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" class="fill-gray-600" viewBox="0 0 256 256">
<path d="M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z"></path>
</svg>
<p class="font-normal text-gray-600">
Sanfransico, California
</p>
</div>
<div class="mt-5 flex items-center gap-4 sm:mt-0">
<button type="button" class="flex items-center text-nowrap gap-2.5 rounded-full border hover:bg-black hover:text-white transition duration-200 border-gray-200 px-4 py-3">
Full Time
</button>
<a href="/" class="group flex h-12 w-12 border border-gray-200 items-center rounded-full justify-center duration-200 transition hover:bg-black">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.9753 1.02471L1 17M16.4376 11.7149C15.1481 10.4254 12.4997 5.50033 17 0.999999C12.4997 5.50033 7.5746 2.8519 6.28505 1.56235" stroke="#07D673" stroke-width="2"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>Product Card Design
Preview
Top selling
Converse Sneakers
High Top (Lemon Yellow)
Show Code
<div class="h-screen px-4 lg:px-0 w-full flex items-center justify-center bg-gray-200">
<article class="max-w-sm w-full bg-white rounded-lg shadow-lg overflow-hidden">
<div class="relative">
<div class="absolute top-3 left-3 bg-white rounded-md px-3 py-1 text-sm">Top selling</div>
<div class="absolute flex flex-col gap-2 right-3 top-3">
<button aria-label="like-icon" class="h-8 w-8 bg-white flex items-center justify-center rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="#000" viewBox="0 0 256 256">
<path
d="M178,40c-20.65,0-38.73,8.88-50,23.89C116.73,48.88,98.65,40,78,40a62.07,62.07,0,0,0-62,62c0,70,103.79,126.66,108.21,129a8,8,0,0,0,7.58,0C136.21,228.66,240,172,240,102A62.07,62.07,0,0,0,178,40ZM128,214.8C109.74,204.16,32,155.69,32,102A46.06,46.06,0,0,1,78,56c19.45,0,35.78,10.36,42.6,27a8,8,0,0,0,14.8,0c6.82-16.67,23.15-27,42.6-27a46.06,46.06,0,0,1,46,46C224,155.61,146.24,204.15,128,214.8Z"
></path>
</svg>
</button>
<button aria-label="share icon" class="h-8 w-8 bg-white flex items-center justify-center rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="#000" viewBox="0 0 256 256">
<path
d="M176,160a39.89,39.89,0,0,0-28.62,12.09l-46.1-29.63a39.8,39.8,0,0,0,0-28.92l46.1-29.63a40,40,0,1,0-8.66-13.45l-46.1,29.63a40,40,0,1,0,0,55.82l46.1,29.63A40,40,0,1,0,176,160Zm0-128a24,24,0,1,1-24,24A24,24,0,0,1,176,32ZM64,152a24,24,0,1,1,24-24A24,24,0,0,1,64,152Zm112,72a24,24,0,1,1,24-24A24,24,0,0,1,176,224Z"
></path>
</svg>
</button>
</div>
<img class="object-cover h-64 w-full" src="https://designcools.com/wp-content/uploads/2024/11/pngtree-vibrant-red-canvas-sports-shoes-with-elevated-soles-unisex-design-in-image_3846974.jpg" alt="card UI design" />
</div>
<div class="flex flex-col sm:flex-row gap-x-1 sm:items-center gap-y-2 sm:justify-between mt-4 px-4">
<div>
<h2 class="text-lg font-semibold text-gray-800">Converse Sneakers</h2>
<p class="font-light text-gray-600">High Top (Lemon Yellow)</p>
</div>
<span class="font-semibold text-2xl text-gray-700">$60</span>
</div>
<div class="flex gap-4 mt-8 px-4">
<button aria-label="Yellow" class="p-2 rounded-full cursor-pointer bg-yellow-500"></button>
<button aria-label="Red" class="p-2 rounded-full cursor-pointer bg-red-500"></button>
<button aria-label="Blue" class="p-2 rounded-full cursor-pointer bg-blue-500"></button>
<button aria-label="Black" class="p-2 rounded-full cursor-pointer bg-gray-800"></button>
</div>
<div class="mt-4 p-4 border-t border-gray-200">
<button aria-label="add to cart" class="w-full flex justify-between items-center font-bold cursor-pointer">
<span class="text-lg">Add to Cart</span>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
</button>
</div>
</article>
</div>Preview
01
Brand Identity Design
Blend of strategic thinking and creative flair to craft a digital identity that resonates and captivates.kits you need to create a true website within minutes.
02
Visual Design
Blend of artistic intuition with strategic insight to craft a visual identity.
03
UX Research
Blend of functionality with aesthetics to create delightful experience.
04
Art Direction
Blend of strategic thinking and artistic finesse to craft a visual identity that goes beyond aesthetics.
Show Code
<div class="container mx-auto py-12 px-4 lg:px-0">
<div class="grid grid-cols-12 sm:gap-6 gap-y-4">
<div class="col-span-12 md:col-span-7 lg:col-span-8">
<div class="bg-white h-full border border-gray-200 group p-8 rounded-2xl">
<h5 class="border py-1 border-gray-100 inline-flex px-3 group-hover:bg-black group-hover:text-white duration-300 rounded-md">01</h5>
<h4 class="uppercase pt-12 text-2xl tracking-wide">Brand Identity Design</h4>
<p class="mt-4 leading-6 text-gray-600">
Blend of strategic thinking and creative flair to craft a digital identity that resonates and captivates.kits you need to create a true website within minutes.
</p>
</div>
</div>
<div class="col-span-12 md:col-span-5 lg:col-span-4">
<div class="bg-white h-full border border-gray-200 p-8 group rounded-2xl">
<h5 class="border py-1 border-gray-100 inline-flex px-3 group-hover:bg-black group-hover:text-white duration-300 rounded-md">02</h5>
<h4 class="uppercase pt-12 text-2xl tracking-wide">Visual Design</h4>
<p class="mt-4 leading-6 text-gray-600">
Blend of artistic intuition with strategic insight to craft a visual identity.
</p>
</div>
</div>
<div class="col-span-12 md:col-span-5 lg:col-span-4">
<div class="bg-white h-full border border-gray-200 p-8 group rounded-2xl">
<h5 class="border py-1 border-gray-100 inline-flex px-3 group-hover:bg-black group-hover:text-white duration-300 rounded-md">03</h5>
<h4 class="uppercase pt-12 text-2xl tracking-wide">UX Research</h4>
<p class="mt-4 leading-6 text-gray-600">
Blend of functionality with aesthetics to create delightful experience.
</p>
</div>
</div>
<div class="col-span-12 md:col-span-7 lg:col-span-8">
<div class="bg-white h-full border border-gray-200 p-8 group rounded-2xl">
<h5 class="border py-1 border-gray-100 inline-flex px-3 group-hover:bg-black group-hover:text-white duration-300 rounded-md">04</h5>
<h4 class="uppercase pt-12 text-2xl tracking-wide">Art Direction</h4>
<p class="mt-4 leading-6 text-gray-600">
Blend of strategic thinking and artistic finesse to craft a visual identity that goes beyond aesthetics.
</p>
</div>
</div>
</div>
</div>Preview
Jon PeterLorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus labore quia atque corrupti praesentium saepe animi minima rerum fuga debitis temporibus doloremque eum repellendus ullam amet, laboriosam facere eius porro.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque quis reiciendis possimus odit sed ea voluptas saepe cumque, laudantium eligendi? Sit ad, eaque perspiciatis rerum dolor recusandae et architecto reiciendis.
Peter Parker Digital Marekting
Mark tonisLorem ipsum dolor sit amet consectetur adipisicing elit. Impedit praesentium rem voluptatem ad officiis tenetur. Hic nam a cupiditate. Deleniti repudiandae aut repellendus illum minus fugiat vero eius saepe sit?
Jigs PoulishLorem ipsum dolor sit amet consectetur adipisicing elit. Id, iure quibusdam necessitatibus doloribus sunt vitae aut excepturi modi, explicabo accusantium sint magnam, soluta tempore aliquam expedita cupiditate earum natus suscipit.
Tom MarkerLorem ipsum dolor sit amet consectetur adipisicing elit. Officiis a aliquid sunt quia eveniet aperiam impedit, voluptas architecto enim deserunt reiciendis, dolor cumque voluptatem dolorem, iste excepturi rem commodi qui.
Noah PatelLorem ipsum dolor sit, amet consectetur adipisicing elit. Unde non exercitationem praesentium dolor veniam nulla placeat magnam soluta rerum, assumenda esse recusandae minima dolorem deleniti aperiam dolores, maiores odio vero.
Noah PatelLorem ipsum dolor sit, amet consectetur adipisicing elit. Modi aliquid sunt veritatis ab quia, dicta libero aliquam iusto rem iste placeat consectetur consequatur natus voluptas illo qui repellendus, eaque quis.
Show Code
<section class="py-12 container px-4 lg:px-0 mx-auto">
<div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
<div class="border p-8 border-gray-100 rounded-lg">
<div class="flex gap-1 text-warning-600">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
</div>
<blockquote class="my-4">
<p class="text-sm line-clamp-6">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus labore quia atque corrupti praesentium saepe animi minima rerum fuga debitis temporibus doloremque eum repellendus ullam amet, laboriosam facere eius
porro.
</p>
</blockquote>
<span class="text-title block text-sm">Jon Peter</span>
</div>
<div class="border border-gray-100 rounded-lg p-8 shadow-lg shadow-gray-950/5 sm:col-span-2 sm:row-start-1 lg:col-start-2 lg:row-start-1">
<div class="flex gap-1 text-warning-600">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
</div>
<p class="my-6 line-clamp-6">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque quis reiciendis possimus odit sed ea voluptas saepe cumque, laudantium eligendi? Sit ad, eaque perspiciatis rerum dolor recusandae et architecto reiciendis.
</p>
<div class="grid gap-3 [grid-template-columns:auto_1fr]">
<div class="rounded-avatar bg-ui size-10 border p-0.5 shadow shadow-gray-950/5">
<img class="aspect-square object-cover" src="https://designcools.com/wp-content/uploads/2024/11/lady2.jpeg" alt="card section design" height="460" width="460" loading="lazy" />
</div>
<div><span class="text-title block text-sm">Peter Parker</span> <span class="text-caption block text-xs">Digital Marekting</span></div>
</div>
</div>
<div class="border p-8 border-gray-100 rounded-lg">
<div class="flex gap-1 text-warning-600">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
</div>
<blockquote class="my-4 line-clamp-6">
<p class="text-sm">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit praesentium rem voluptatem ad officiis tenetur. Hic nam a cupiditate. Deleniti repudiandae aut repellendus illum minus fugiat vero eius saepe sit?
</p>
</blockquote>
<span class="text-title block text-sm">Mark tonis</span>
</div>
<div class="border p-8 border-gray-100 rounded-lg">
<div class="flex gap-1 text-warning-600">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
</div>
<blockquote class="my-4 line-clamp-6">
<p class="text-sm">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, iure quibusdam necessitatibus doloribus sunt vitae aut excepturi modi, explicabo accusantium sint magnam, soluta tempore aliquam expedita cupiditate earum
natus suscipit.
</p>
</blockquote>
<span class="text-title block text-sm">Jigs Poulish</span>
</div>
<div class="border p-8 border-gray-100 rounded-lg">
<div class="flex gap-1 text-warning-600">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
</div>
<blockquote class="my-4 line-clamp-6">
<p class="text-sm">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis a aliquid sunt quia eveniet aperiam impedit, voluptas architecto enim deserunt reiciendis, dolor cumque voluptatem dolorem, iste excepturi rem commodi
qui.
</p>
</blockquote>
<span class="text-title block text-sm">Tom Marker</span>
</div>
<div class="border p-8 border-gray-100 rounded-lg">
<div class="flex gap-1 text-warning-600">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4 text-gray-300">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
</div>
<blockquote class="my-4 line-clamp-6">
<p class="text-sm">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde non exercitationem praesentium dolor veniam nulla placeat magnam soluta rerum, assumenda esse recusandae minima dolorem deleniti aperiam dolores, maiores
odio vero.
</p>
</blockquote>
<span class="text-title block text-sm">Noah Patel</span>
</div>
<div class="border p-8 border-gray-100 rounded-lg">
<div class="flex gap-1 text-warning-600">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffcc00" class="size-4 text-gray-300">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
></path>
</svg>
</div>
<blockquote class="my-4 line-clamp-6">
<p class="text-sm">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi aliquid sunt veritatis ab quia, dicta libero aliquam iusto rem iste placeat consectetur consequatur natus voluptas illo qui repellendus, eaque quis.
</p>
</blockquote>
<span class="text-title block text-sm">Noah Patel</span>
</div>
</div>
</section>Preview
Premium Converse Sneakers
SKU: WH1000XM4
$349.99 $399.99
4.5 (120 reviews)
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur fugit non quod sint esse, aliquid ad illo quae qui repellendus amet, atque, quia nisi laudantium tempore dolorem ratione iusto culpa.
Color:
Key Features:
- Industry-leading noise cancellation
- 30-hour battery life
- Touch sensor controls
- Speak-to-chat technology
Show Code
<div>
<div class="container mx-auto px-4 lg:px-0 py-12">
<div class="flex flex-wrap">
<div class="w-full md:w-1/2 px-4 mb-8">
<img src="https://designcools.com/wp-content/uploads/2024/11/pngtree-vibrant-red-canvas-sports-shoes-with-elevated-soles-unisex-design-in-image_3846974.jpg" alt="product section design" class="w-full h-auto rounded-md" />
<div class="flex gap-4 py-4 overflow-x-auto">
<img
src="https://designcools.com/wp-content/uploads/2024/11/pngtree-vibrant-red-canvas-sports-shoes-with-elevated-soles-unisex-design-in-image_3846974.jpg"
alt="product section design"
class="size-16 object-cover rounded-md cursor-pointer opacity-70 hover:opacity-100 transition duration-200"
/>
<img
src="https://designcools.com/wp-content/uploads/2024/11/pngtree-vibrant-red-canvas-sports-shoes-with-elevated-soles-unisex-design-in-image_3846974.jpg"
alt="product section UI Design"
class="size-16 object-cover rounded-md cursor-pointer opacity-70 hover:opacity-100 transition duration-200"
/>
<img
src="https://designcools.com/wp-content/uploads/2024/11/pngtree-vibrant-red-canvas-sports-shoes-with-elevated-soles-unisex-design-in-image_3846974.jpg"
alt="Product section UI component"
class="size-16 object-cover rounded-md cursor-pointer opacity-70 hover:opacity-100 transition duration-200"
/>
<img
src="https://designcools.com/wp-content/uploads/2024/11/pngtree-vibrant-red-canvas-sports-shoes-with-elevated-soles-unisex-design-in-image_3846974.jpg"
alt="Product section card design"
class="size-16 object-cover rounded-md cursor-pointer opacity-70 hover:opacity-100 transition duration-200"
/>
</div>
</div>
<div class="w-full md:w-1/2 px-4">
<h2 class="text-3xl font-bold mb-2">Premium Converse Sneakers</h2>
<p class="text-gray-600 mb-4">SKU: WH1000XM4</p>
<div class="mb-4">
<span class="text-2xl font-bold mr-2">$349.99</span>
<span class="text-gray-500 line-through">$399.99</span>
</div>
<div class="flex items-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5 text-yellow-500">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5 text-yellow-500">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5 text-yellow-500">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5 text-yellow-500">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5 text-yellow-500">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
clip-rule="evenodd"
/>
</svg>
<span class="ml-2 text-gray-600">4.5 (120 reviews)</span>
</div>
<p class="text-gray-700 font-light text-base mb-6">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur fugit non quod sint esse, aliquid ad illo quae qui repellendus amet, atque, quia nisi laudantium tempore dolorem ratione iusto culpa.
</p>
<div class="mb-6">
<h3 class="text-lg font-medium mb-3">Color:</h3>
<div class="flex space-x-2">
<button class="w-8 h-8 bg-black rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black"></button>
<button class="w-8 h-8 bg-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300"></button>
<button class="w-8 h-8 bg-blue-500 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"></button>
<button class="w-8 h-8 bg-red-500 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"></button>
</div>
</div>
<div class="mb-6">
<label for="quantity" class="block text-lg font-medium mb-3">Quantity:</label>
<input name="quantity" min="1" value="1" class="w-12 py-1 text-center rounded-md border-gray-300 shadow-sm border outline-none" />
</div>
<div class="flex space-x-3 mb-6">
<button class="bg-black flex gap-2 items-center text-white px-6 py-2 rounded-md hover:bg-white hover:text-black border duration-300 text-sm">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
/>
</svg>
Add to Cart
</button>
<button class="border flex gap-2 items-center text-gray-800 px-6 py-2 rounded-md">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"
/>
</svg>
Wishlist
</button>
</div>
<div>
<h3 class="text-lg font-medium mb-2">Key Features:</h3>
<ul class="list-disc list-inside text-gray-700">
<li>Industry-leading noise cancellation</li>
<li>30-hour battery life</li>
<li>Touch sensor controls</li>
<li>Speak-to-chat technology</li>
</ul>
</div>
</div>
</div>
</div>
</div>Preview
Explore your business with digital marketing. 
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi nobis ut saepe, in repellat quaerat sequi impedit, voluptatum tenetur officiis dolores! Eveniet unde, fuga quidem ab culpa esse aspernatur.
3 Aug, 2024
Explore your business with digital marketing.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi nobis ut saepe, in repellat quaerat sequi impedit, voluptatum tenetur officiis dolores! Eveniet unde, fuga quidem ab culpa esse aspernatur.
3 Aug, 2024
Explore your business with digital marketing.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi nobis ut saepe, in repellat quaerat sequi impedit, voluptatum tenetur officiis dolores! Eveniet unde, fuga quidem ab culpa esse aspernatur.
3 Aug, 2024
Show Code
<div class="grid py-8 px-4 xl:px-0 sm:gap-x-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
<div class="bg-white rounded-2xl border">
<div class="relative">
<img class="rounded-t-xl" src="https://designcools.com/wp-content/uploads/2024/10/pexels-enginakyurt-1435849-scaled.jpg" alt="card design" />
</div>
<div class="flex py-6 px-6">
<div>
<a href="/" class="text-xl text-black font-medium line-clamp-2 capitalize">Explore your business with digital marketing.</a>
<p class="mt-4 mb-6 text-gray-600 line-clamp-5 leading-relaxed">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi nobis ut saepe, in repellat quaerat sequi impedit, voluptatum tenetur officiis dolores! Eveniet unde, fuga quidem ab culpa esse aspernatur.</p>
<div class="flex items-center justify-between gap-3 mt-4">
<div class="flex items-center">
<img src="https://designcools.com/wp-content/uploads/2024/11/lady2.jpeg" class="h-10 w-10 me-4 rounded-full" alt="card design" />
<label class="font-medium"> Jessica Smith</label>
</div>
<p class="flex font-light text-muted">3 Aug, 2024</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-2xl border">
<div class="relative">
<img class="rounded-t-xl" src="https://designcools.com/wp-content/uploads/2024/10/pexels-enginakyurt-1435849-scaled.jpg" alt="card design" />
</div>
<div class="flex py-6 px-6">
<div>
<a href="/" class="text-xl text-black font-medium line-clamp-2 capitalize">Explore your business with digital marketing.</a>
<p class="mt-4 mb-6 text-gray-600 line-clamp-5 leading-relaxed">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi nobis ut saepe, in repellat quaerat sequi impedit, voluptatum tenetur officiis dolores! Eveniet unde, fuga quidem ab culpa esse aspernatur.</p>
<div class="flex items-center justify-between gap-3 mt-4">
<div class="flex items-center">
<img src="https://designcools.com/wp-content/uploads/2024/11/lady2.jpeg" class="h-10 w-10 me-4 rounded-full" alt="card design" />
<label class="font-medium"> Jessica Smith</label>
</div>
<p class="flex font-light text-muted">3 Aug, 2024</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-2xl border">
<div class="relative">
<img class="rounded-t-xl" src="https://designcools.com/wp-content/uploads/2024/10/pexels-enginakyurt-1435849-scaled.jpg" alt="card design" />
</div>
<div class="flex py-6 px-6">
<div>
<a href="/" class="text-xl text-black font-medium line-clamp-2 capitalize">Explore your business with digital marketing.</a>
<p class="mt-4 mb-6 text-gray-600 line-clamp-5 leading-relaxed">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis animi nobis ut saepe, in repellat quaerat sequi impedit, voluptatum tenetur officiis dolores! Eveniet unde, fuga quidem ab culpa esse aspernatur.</p>
<div class="flex items-center justify-between gap-3 mt-4">
<div class="flex items-center">
<img src="https://designcools.com/wp-content/uploads/2024/11/lady2.jpeg" class="h-10 w-10 me-4 rounded-full" alt="card design" />
<label class="font-medium"> Jessica Smith</label>
</div>
<p class="flex font-light text-muted">3 Aug, 2024</p>
</div>
</div>
</div>
</div>
</div>Preview
Marketing
Gain a comprehensive understanding of your industry landscape.
User Experience
Evaluate the viability and potential of new products or services.
Digital Marketing
Benchmark your performance against competitors, identify strengths.
SEO Services
Anticipate market shifts and emerging trends to stay ahead of the curve.
UI/UX Design
Our market research services are designed to provide maximum value.
Software Design
We go beyond data collection to provide actionable insights.
Affiliate Marketing
We understand that every business is unique. That’s why we offer.
Website Design
In today’s competitive market, timing is everything. Our efficient.
Show Code
<div class="grid lg:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-x-3 gap-y-6 md:gap-y-12 lg:gap-y-24 py-12">
<div class="text-center">
<div class="flex items-center justify-center">
<div class="items-center justify-center flex rounded-[49%_80%_40%_90%_/_50%_30%_70%_80%] h-20 w-20 border">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="h-10 w-10 text-primary"
>
<line x1="4" x2="20" y1="12" y2="12"></line>
<line x1="4" x2="20" y1="6" y2="6"></line>
<line x1="4" x2="20" y1="18" y2="18"></line>
</svg>
</div>
</div>
<h1 class="text-xl font-semibold pt-4">Marketing</h1>
<p class="text-base text-gray-600 mt-2">Gain a comprehensive understanding of your industry landscape.</p>
</div>
<div class="text-center">
<div class="flex items-center justify-center">
<div class="items-center justify-center flex rounded-[49%_80%_40%_90%_/_50%_30%_70%_80%] h-20 w-20 border">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="h-10 w-10 text-primary"
>
<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path>
<path d="M9 18h6"></path>
<path d="M10 22h4"></path>
</svg>
</div>
</div>
<h1 class="text-xl font-semibold pt-4">User Experience</h1>
<p class="text-base text-gray-600 mt-2">Evaluate the viability and potential of new products or services.</p>
</div>
<div class="text-center">
<div class="flex items-center justify-center">
<div class="items-center justify-center flex rounded-[49%_80%_40%_90%_/_50%_30%_70%_80%] h-20 w-20 border">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="h-10 w-10 text-primary"
>
<path d="M3 3v18h18"></path>
<rect width="4" height="7" x="7" y="10" rx="1"></rect>
<rect width="4" height="12" x="15" y="5" rx="1"></rect>
</svg>
</div>
</div>
<h1 class="text-xl font-semibold pt-4">Digital Marketing</h1>
<p class="text-base text-gray-600 mt-2">Benchmark your performance against competitors, identify strengths.</p>
</div>
<div class="text-center">
<div class="flex items-center justify-center">
<div class="items-center justify-center flex rounded-[49%_80%_40%_90%_/_50%_30%_70%_80%] h-20 w-20 border">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="h-10 w-10 text-primary"
>
<polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"></polygon>
<line x1="12" x2="12" y1="22" y2="15.5"></line>
<polyline points="22 8.5 12 15.5 2 8.5"></polyline>
<polyline points="2 15.5 12 8.5 22 15.5"></polyline>
<line x1="12" x2="12" y1="2" y2="8.5"></line>
</svg>
</div>
</div>
<h1 class="text-xl font-semibold pt-4">SEO Services</h1>
<p class="text-base text-gray-600 mt-2">Anticipate market shifts and emerging trends to stay ahead of the curve.</p>
</div>
<div class="text-center">
<div class="flex items-center justify-center">
<div class="items-center justify-center flex rounded-[49%_80%_40%_90%_/_50%_30%_70%_80%] h-20 w-20 border">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="h-10 w-10 text-primary"
>
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"></path>
</svg>
</div>
</div>
<h1 class="text-xl font-semibold pt-4">UI/UX Design</h1>
<p class="text-base text-gray-600 mt-2">Our market research services are designed to provide maximum value.</p>
</div>
<div class="text-center">
<div class="flex items-center justify-center">
<div class="items-center justify-center flex rounded-[49%_80%_40%_90%_/_50%_30%_70%_80%] h-20 w-20 border">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="h-10 w-10 text-primary"
>
<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path>
<path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path>
<path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path>
<path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path>
</svg>
</div>
</div>
<h1 class="text-xl font-semibold pt-4">Software Design</h1>
<p class="text-base text-gray-600 mt-2">We go beyond data collection to provide actionable insights.</p>
</div>
<div class="text-center">
<div class="flex items-center justify-center">
<div class="items-center justify-center flex rounded-[49%_80%_40%_90%_/_50%_30%_70%_80%] h-20 w-20 border">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="h-10 w-10 text-primary"
>
<path d="m16.02 12 5.48 3.13a1 1 0 0 1 0 1.74L13 21.74a2 2 0 0 1-2 0l-8.5-4.87a1 1 0 0 1 0-1.74L7.98 12"></path>
<path d="M13 13.74a2 2 0 0 1-2 0L2.5 8.87a1 1 0 0 1 0-1.74L11 2.26a2 2 0 0 1 2 0l8.5 4.87a1 1 0 0 1 0 1.74Z"></path>
</svg>
</div>
</div>
<h1 class="text-xl font-semibold pt-4">Affiliate Marketing</h1>
<p class="text-base text-gray-600 mt-2">We understand that every business is unique. That's why we offer.</p>
</div>
<div class="text-center">
<div class="flex items-center justify-center">
<div class="items-center justify-center flex rounded-[49%_80%_40%_90%_/_50%_30%_70%_80%] h-20 w-20 border">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="h-10 w-10 text-primary"
>
<circle cx="12" cy="10" r="8"></circle>
<circle cx="12" cy="10" r="3"></circle>
<path d="M7 22h10"></path>
<path d="M12 22v-4"></path>
</svg>
</div>
</div>
<h1 class="text-xl font-semibold pt-4">Website Design</h1>
<p class="text-base text-gray-600 mt-2">In today's competitive market, timing is everything. Our efficient.</p>
</div>
</div>Preview
16/10/24
Sania Therapeutics presents latest from AAV gene therapy platform at the American Society of Gene & Cell Therapy Annual Meeting
16/10/24
Sania Therapeutics presents latest from AAV gene therapy platform at the American Society of Gene & Cell Therapy Annual Meeting
16/10/24
Sania Therapeutics presents latest from AAV gene therapy platform at the American Society of Gene & Cell Therapy Annual Meeting
Show Code
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<div>
<div class="relative flex">
<img class="rounded-3xl flex" src="https://designcools.com/wp-content/uploads/2024/10/premium_photo-1673643405538-de0f82933fcb-scaled.jpeg" alt="card ui design" />
<svg class="absolute bottom-16 right-0" xmlns="http://www.w3.org/2000/svg" width="1.5rem" viewBox="0 0 13 13" fill="currentColor" height="1.5rem" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<path d="M1.3113e-06 13L13 13L13 -8.34465e-07C13 7.1797 7.1797 13 1.3113e-06 13Z" fill="#fff"></path>
</svg>
<div class="absolute flex items-end justify-end bg-white bottom-0 right-0 h-16 rounded-tl-3xl w-16">
<button class="bg-black flex items-center justify-center rounded-full text-white h-12 w-12">
<svg xmlns="http://www.w3.org/2000/svg" width="1.4rem" height="1.4rem" fill="currentColor" viewBox="0 0 256 256">
<path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path>
</svg>
</button>
</div>
<svg class="absolute bottom-0 right-16" xmlns="http://www.w3.org/2000/svg" width="1.5rem" viewBox="0 0 13 13" fill="currentColor" height="1.5rem" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<path d="M1.3113e-06 13L13 13L13 -8.34465e-07C13 7.1797 7.1797 13 1.3113e-06 13Z" fill="#fff"></path>
</svg>
</div>
<p class="mt-8 text-sm text-gray-600">16/10/24</p>
<p class="text-lg mt-3 font-light line-clamp-3">
Sania Therapeutics presents latest from AAV gene therapy platform at the American Society of Gene & Cell Therapy Annual Meeting
</p>
</div>
<div>
<div class="relative flex">
<img class="rounded-3xl flex" src="https://designcools.com/wp-content/uploads/2024/10/pexels-enginakyurt-1435849-scaled.jpg" alt="card design" />
<svg class="absolute bottom-16 right-0" xmlns="http://www.w3.org/2000/svg" width="1.5rem" viewBox="0 0 13 13" fill="currentColor" height="1.5rem" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<path d="M1.3113e-06 13L13 13L13 -8.34465e-07C13 7.1797 7.1797 13 1.3113e-06 13Z" fill="#fff"></path>
</svg>
<div class="absolute flex items-end justify-end bg-white bottom-0 right-0 h-16 rounded-tl-3xl w-16">
<button class="bg-black flex items-center justify-center rounded-full text-white h-12 w-12">
<svg xmlns="http://www.w3.org/2000/svg" width="1.4rem" height="1.4rem" fill="currentColor" viewBox="0 0 256 256">
<path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path>
</svg>
</button>
</div>
<svg class="absolute bottom-0 right-16" xmlns="http://www.w3.org/2000/svg" width="1.5rem" viewBox="0 0 13 13" fill="currentColor" height="1.5rem" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<path d="M1.3113e-06 13L13 13L13 -8.34465e-07C13 7.1797 7.1797 13 1.3113e-06 13Z" fill="#fff"></path>
</svg>
</div>
<p class="mt-8 text-sm text-gray-600">16/10/24</p>
<p class="text-lg mt-3 font-light line-clamp-3">
Sania Therapeutics presents latest from AAV gene therapy platform at the American Society of Gene & Cell Therapy Annual Meeting
</p>
</div>
<div>
<div class="relative flex">
<img class="rounded-3xl flex" src="https://designcools.com/wp-content/uploads/2024/10/premium_photo-1673643405538-de0f82933fcb-scaled.jpeg" alt="card section ui design" />
<svg class="absolute bottom-16 right-0" xmlns="http://www.w3.org/2000/svg" width="1.5rem" viewBox="0 0 13 13" fill="currentColor" height="1.5rem" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<path d="M1.3113e-06 13L13 13L13 -8.34465e-07C13 7.1797 7.1797 13 1.3113e-06 13Z" fill="#fff"></path>
</svg>
<div class="absolute flex items-end justify-end bg-white bottom-0 right-0 h-16 rounded-tl-3xl w-16">
<button class="bg-black flex items-center justify-center rounded-full text-white h-12 w-12">
<svg xmlns="http://www.w3.org/2000/svg" width="1.4rem" height="1.4rem" fill="currentColor" viewBox="0 0 256 256">
<path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path>
</svg>
</button>
</div>
<svg class="absolute bottom-0 right-16" xmlns="http://www.w3.org/2000/svg" width="1.5rem" viewBox="0 0 13 13" fill="currentColor" height="1.5rem" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<path d="M1.3113e-06 13L13 13L13 -8.34465e-07C13 7.1797 7.1797 13 1.3113e-06 13Z" fill="#fff"></path>
</svg>
</div>
<p class="mt-8 text-sm text-gray-600">16/10/24</p>
<p class="text-lg mt-3 font-light line-clamp-3">
Sania Therapeutics presents latest from AAV gene therapy platform at the American Society of Gene & Cell Therapy Annual Meeting
</p>
</div>
</div>
Cards design are commonly used to showcase products, services, blog posts, or any other content that needs to be presented in a structured way. Their modular nature makes them perfect for responsive design, ensuring they look great on both desktop and mobile devices.
Cards design can also be Customize to match your brand identity. Use colors, fonts, and styles that align with your overall design language. Grouping related cards into categories or rows can help users find what they’re looking for more efficiently.
Preview
Case study
Skip the bank, borrow from those you trust
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.
Case study
Get a hodl of your health
Unseal is the first NFT platform where users can mint and trade NFTs of their own personal health records, allowing them to take control of their data.
Case study
Overcome your fears, find your match
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
Show Code
<div class="mx-auto max-w-7xl px-4 xl:px-0">
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
<div class="flex">
<article class="relative flex w-full flex-col rounded-3xl p-6 ring-1 ring-neutral-950/5 transition hover:bg-neutral-50 sm:p-8">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256">
<path
d="M128,96H232a8,8,0,0,1,0,16H128a8,8,0,0,1,0-16Zm104,32H128a8,8,0,0,0,0,16H232a8,8,0,0,0,0-16Zm0,32H80a8,8,0,0,0,0,16H232a8,8,0,0,0,0-16Zm0,32H80a8,8,0,0,0,0,16H232a8,8,0,0,0,0-16ZM96,144a8,8,0,0,0,0-16H88V64h32v8a8,8,0,0,0,16,0V56a8,8,0,0,0-8-8H32a8,8,0,0,0-8,8V72a8,8,0,0,0,16,0V64H72v64H64a8,8,0,0,0,0,16Z"
></path>
</svg>
</div>
<p class="mt-6 flex gap-x-2 text-sm text-neutral-950"><time datetime="2023" class="font-semibold">2023</time><span class="text-neutral-300" aria-hidden="true">/</span><span>Case study</span></p>
<p class="mt-6 font-display line-clamp-2 text-2xl font-semibold text-neutral-950">Skip the bank, borrow from those you trust</p>
<p class="mt-4 text-base line-clamp-4 leading-relaxed text-neutral-600">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</article>
</div>
<div class="flex">
<article class="relative flex w-full flex-col rounded-3xl p-6 ring-1 ring-neutral-950/5 transition hover:bg-neutral-50 sm:p-8">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256">
<path
d="M128,96H232a8,8,0,0,1,0,16H128a8,8,0,0,1,0-16Zm104,32H128a8,8,0,0,0,0,16H232a8,8,0,0,0,0-16Zm0,32H80a8,8,0,0,0,0,16H232a8,8,0,0,0,0-16Zm0,32H80a8,8,0,0,0,0,16H232a8,8,0,0,0,0-16ZM96,144a8,8,0,0,0,0-16H88V64h32v8a8,8,0,0,0,16,0V56a8,8,0,0,0-8-8H32a8,8,0,0,0-8,8V72a8,8,0,0,0,16,0V64H72v64H64a8,8,0,0,0,0,16Z"
></path>
</svg>
</div>
<p class="mt-6 flex gap-x-2 text-sm text-neutral-950"><time datetime="2022" class="font-semibold">2022</time><span class="text-neutral-300" aria-hidden="true">/</span><span>Case study</span></p>
<p class="mt-6 font-display line-clamp-2 text-2xl font-semibold text-neutral-950">Get a hodl of your health</p>
<p class="mt-4 text-base line-clamp-4 leading-relaxed text-neutral-600">
Unseal is the first NFT platform where users can mint and trade NFTs of their own personal health records, allowing them to take control of their data.
</p>
</article>
</div>
<div class="flex">
<article class="relative flex w-full flex-col rounded-3xl p-6 ring-1 ring-neutral-950/5 transition hover:bg-neutral-50 sm:p-8">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256">
<path
d="M128,96H232a8,8,0,0,1,0,16H128a8,8,0,0,1,0-16Zm104,32H128a8,8,0,0,0,0,16H232a8,8,0,0,0,0-16Zm0,32H80a8,8,0,0,0,0,16H232a8,8,0,0,0,0-16Zm0,32H80a8,8,0,0,0,0,16H232a8,8,0,0,0,0-16ZM96,144a8,8,0,0,0,0-16H88V64h32v8a8,8,0,0,0,16,0V56a8,8,0,0,0-8-8H32a8,8,0,0,0-8,8V72a8,8,0,0,0,16,0V64H72v64H64a8,8,0,0,0,0,16Z"
></path>
</svg>
</div>
<p class="mt-6 flex gap-x-2 text-sm text-neutral-950"><time datetime="2022" class="font-semibold">2022</time><span class="text-neutral-300" aria-hidden="true">/</span><span>Case study</span></p>
<p class="mt-6 font-display line-clamp-2 text-2xl font-semibold text-neutral-950">Overcome your fears, find your match</p>
<p class="mt-4 text-base line-clamp-4 leading-relaxed text-neutral-600">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
</p>
</article>
</div>
</div>
</div>Preview
Social Media Post
Start working with Tailwindcss It allows you to compose complex designs by combining and customizing utility classes..
Customize Your post
Customizing your post refers to the process of tailoring your content to suit your specific goals, audience, and platform.
More ToolsInstant Content Creation
Instant content creation refers to the process of generating high-quality written, visual, or multimedia content quickly and efficiently.
More ToolsAI-Powered Content Suggestions
AI-powered content suggestions leverage artificial intelligence and machine learning algorithms to help content creators generate ideas.
More ToolsDedicated Customer Support
Dedicated customer support is a service provided by organizations to assist and address the needs, concerns, and inquiries of their customers.
More ToolsShow Code
<div class="mx-auto max-w-7xl px-4 xl:px-0">
<div class="flex items-end justify-between mb-10">
<div class="max-w-2xl mx-auto text-center">
<h2 class="text-3xl font-medium capitalize mb-4">Social Media Post</h2>
<p class="text-sm text-default-200">Start working with Tailwindcss It allows you to compose complex designs by combining and customizing utility classes..</p>
</div>
</div>
<div class="flex items-center flex-wrap rounded-3xl bg-gray-100 backdrop-blur-3xl">
<div class="md:w-1/2 w-auto grow md:border-e border-b border-gray-200">
<div class="sm:p-10 p-6">
<div class="inline-flex items-center justify-center h-12 sm:h-16 w-12 sm:w-16 text-white bg-black rounded-xl mb-10">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" class="h-6 sm:h-8 w-6 sm:w-8">
<path d="M5 16V9h14V2H5l14 14h-7m-7 0 7 7v-7m-7 0h7"></path>
</svg>
</div>
<h2 class="text-2xl font-medium mb-4">Customize Your post</h2>
<p class="text-base text-default-200 mb-6">Customizing your post refers to the process of tailoring your content to suit your specific goals, audience, and platform.</p>
<a href="/" class="inline-flex items-center justify-center gap-2 border border-gray-200 py-2 px-6 rounded-full hover:bg-black hover:text-white transition-all duration-300">
More Tools
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" class="h-5 w-5">
<path d="M18 8L22 12L18 16"></path>
<path d="M2 12H22"></path>
</svg>
</a>
</div>
</div>
<div class="md:w-1/2 w-auto grow border-b border-gray-200">
<div class="sm:p-10 p-6">
<div class="inline-flex items-center justify-center h-12 sm:h-16 w-12 sm:w-16 bg-black text-white rounded-xl mb-10">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
data-lucide="codesandbox"
class="h-6 sm:h-8 w-6 sm:w-8"
>
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
<polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline>
<polyline points="7.5 19.79 7.5 14.6 3 12"></polyline>
<polyline points="21 12 16.5 14.6 16.5 19.79"></polyline>
<polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
<line x1="12" x2="12" y1="22.08" y2="12"></line>
</svg>
</div>
<h2 class="text-2xl font-medium mb-4">Instant Content Creation</h2>
<p class="text-base text-default-200 mb-6">Instant content creation refers to the process of generating high-quality written, visual, or multimedia content quickly and efficiently.</p>
<a href="/" class="inline-flex items-center justify-center gap-2 border border-gray-200 py-2 px-6 rounded-full hover:bg-black hover:text-white transition-all duration-300">
More Tools
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" class="h-5 w-5">
<path d="M18 8L22 12L18 16"></path>
<path d="M2 12H22"></path>
</svg>
</a>
</div>
</div>
<div class="md:w-1/2 w-auto grow border-b md:border-b-0 md:border-e border-gray-200">
<div class="sm:p-10 p-6">
<div class="inline-flex items-center justify-center h-12 sm:h-16 w-12 sm:w-16 bg-black text-white rounded-xl mb-10">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
data-lucide="life-buoy"
class="h-6 sm:h-8 w-6 sm:w-8"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="m4.93 4.93 4.24 4.24"></path>
<path d="m14.83 9.17 4.24-4.24"></path>
<path d="m14.83 14.83 4.24 4.24"></path>
<path d="m9.17 14.83-4.24 4.24"></path>
<circle cx="12" cy="12" r="4"></circle>
</svg>
</div>
<h2 class="text-2xl font-medium mb-4">AI-Powered Content Suggestions</h2>
<p class="text-base mb-6">AI-powered content suggestions leverage artificial intelligence and machine learning algorithms to help content creators generate ideas.</p>
<a href="/" class="inline-flex items-center justify-center gap-2 border border-gray-200 py-2 px-6 rounded-full hover:bg-black hover:text-white transition-all duration-300">
More Tools
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" class="h-5 w-5">
<path d="M18 8L22 12L18 16"></path>
<path d="M2 12H22"></path>
</svg>
</a>
</div>
</div>
<div class="md:w-1/2 w-auto grow border-gray-200">
<div class="sm:p-10 p-6">
<div class="inline-flex items-center justify-center h-12 sm:h-16 w-12 sm:w-16 bg-black text-white rounded-xl mb-10">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
data-lucide="package"
class="h-6 sm:h-8 w-6 sm:w-8"
>
<path d="m7.5 4.27 9 5.15"></path>
<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"></path>
<path d="m3.3 7 8.7 5 8.7-5"></path>
<path d="M12 22V12"></path>
</svg>
</div>
<h2 class="text-2xl font-medium mb-4">Dedicated Customer Support</h2>
<p class="text-base text-default-200 mb-6">Dedicated customer support is a service provided by organizations to assist and address the needs, concerns, and inquiries of their customers.</p>
<a href="/" class="inline-flex items-center justify-center gap-2 border border-gray-200 py-2 px-6 rounded-full hover:bg-black hover:text-white transition-all duration-300">
More Tools
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" class="h-5 w-5">
<path d="M18 8L22 12L18 16"></path>
<path d="M2 12H22"></path>
</svg>
</a>
</div>
</div>
</div>
</div>Preview
What we Provide
Check Our Services
Nemo enim ipsam voluptatem that quia voluptas aut fugit
Clean Design
Quisque quis velit quiars ligula aliquet lacinia quis a diam quisque pretium nulla nec ultricies magna.
Awesome Code
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur nesciunt.
Creative Idea
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.
Unlimited Features
Et harum quidem rerum facilis est expedita distinctio nam libero tempore cum soluta nobis est eligendi.
Fully Responsive
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.
Finance Friendly
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium rem doloremque laudantium.
Show Code
<section id="service" class="py-24">
<div class="mx-auto max-w-7xl px-4 xl:px-0">
<div class="flex items-center justify-center mb-14">
<div class="max-w-2xl text-center">
<h5 class="capitalize text-lg text-gray-800 font-medium mb-2">What we <span class="font-semibold text-primary">Provide</span></h5>
<h2 class="text-3xl/snug font-bold capitalize text-gray-800 mb-1">Check Our Services</h2>
<p class="text-base text-gray-600">Nemo enim ipsam voluptatem that quia voluptas aut fugit</p>
</div>
</div>
<div class="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-8">
<div class="bg-white p-6">
<span class="inline-flex relative z-0 bg-blue-50 h-14 w-14 mb-6">
<div class="absolute -z-20 top-5 left-5 right-0 bottom-0">
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
<polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
<line x1="12" y1="22.08" x2="12" y2="12"></line>
</svg>
</div>
</span>
<h5 class="text-xl font-medium mt-5 text-gray-800">Clean Design</h5>
<p class="text-base text-slate-600 mt-4">Quisque quis velit quiars ligula aliquet lacinia quis a diam quisque pretium nulla nec ultricies magna.</p>
</div>
<div class="bg-white p-6">
<span class="inline-flex relative z-0 bg-red-50 h-14 w-14 mb-6">
<div class="absolute -z-20 top-5 left-5 right-0 bottom-0">
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-red-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<circle cx="12" cy="12" r="4"></circle>
<path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"></path>
</svg>
</div>
</span>
<h5 class="text-xl font-medium mt-5 text-gray-800">Awesome Code</h5>
<p class="text-base text-slate-600 mt-4">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur nesciunt.</p>
</div>
<div class="bg-white p-6">
<span class="inline-flex relative z-0 bg-emerald-50 h-14 w-14 mb-6">
<div class="absolute -z-20 top-5 left-5 right-0 bottom-0">
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path
d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z"
></path>
</svg>
</div>
</span>
<h5 class="text-xl font-medium mt-5 text-gray-800">Creative Idea</h5>
<p class="text-base text-slate-600 mt-4">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.</p>
</div>
<div class="bg-white p-6">
<span class="inline-flex relative z-0 bg-sky-50 h-14 w-14 mb-6">
<div class="absolute -z-20 top-5 left-5 right-0 bottom-0">
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-sky-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<rect x="3" y="3" width="7" height="7"></rect>
<rect x="14" y="3" width="7" height="7"></rect>
<rect x="14" y="14" width="7" height="7"></rect>
<rect x="3" y="14" width="7" height="7"></rect>
</svg>
</div>
</span>
<h5 class="text-xl font-medium mt-5 text-gray-800">Unlimited Features</h5>
<p class="text-base text-slate-600 mt-4">Et harum quidem rerum facilis est expedita distinctio nam libero tempore cum soluta nobis est eligendi.</p>
</div>
<div class="bg-white p-6">
<span class="inline-flex relative z-0 bg-amber-50 h-14 w-14 mb-6">
<div class="absolute -z-20 top-5 left-5 right-0 bottom-0">
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
<line x1="8" y1="21" x2="16" y2="21"></line>
<line x1="12" y1="17" x2="12" y2="21"></line>
</svg>
</div>
</span>
<h5 class="text-xl font-medium mt-5 text-gray-800">Fully Responsive</h5>
<p class="text-base text-slate-600 mt-4">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.</p>
</div>
<div class="bg-white p-6">
<span class="inline-flex relative z-0 bg-violet-50 h-14 w-14 mb-6">
<div class="absolute -z-20 top-5 left-5 right-0 bottom-0">
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-violet-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<circle cx="12" cy="12" r="4"></circle>
<line x1="21.17" y1="8" x2="12" y2="8"></line>
<line x1="3.95" y1="6.06" x2="8.54" y2="14"></line>
<line x1="10.88" y1="21.94" x2="15.46" y2="14"></line>
</svg>
</div>
</span>
<h5 class="text-xl font-medium mt-5 text-gray-800">Finance Friendly</h5>
<p class="text-base text-slate-600 mt-4">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium rem doloremque laudantium.</p>
</div>
</div>
</div>
</section>Preview
Boost your conversion rate
Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel. Iusto corrupti dicta.
Show Code
<div class="w-full">
<div class="mx-auto max-w-7xl px-4 xl:px-0">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-14 gap-y-16">
<article class="flex border border-gray-300 p-6 hover:shadow-lg max-w-xl flex-col items-start justify-between">
<div class="flex items-center gap-x-3 text-xs">
<time datetime="2020-03-16" class="text-gray-700 text-md">
Mar 16, 2020
</time>
<a href="/" class="relative z-10 text-[0.75rem] rounded-full bg-gray-50 px-3 py-1 font-medium hover:bg-gray-100">
Marketing
</a>
</div>
<div class="group relative">
<h3 class="mt-3 text-2xl font-semibold leading-none text-gray-900 group-hover:text-gray-600">
<a href="/">
<span class="absolute inset-0"></span>
Boost your conversion rate
</a>
</h3>
<p class="mt-5 line-clamp-3 leading-relaxed text-[0.875rem] text-gray-700">
Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel. Iusto corrupti dicta.
</p>
</div>
<div class="relative mt-8 flex items-center gap-x-4">
<img src="https://designcools.com/wp-content/uploads/2024/11/lady2.jpeg" alt="card section design" class="h-12 w-12 rounded-full bg-gray-50" />
<div>
<a href="/" class="text-lg font-medium">
Michael Foster
</a>
<p class="text-gray-700 text-[0.875rem]">Co-Founder / CTO</p>
</div>
</div>
</article>
</div>
</div>
</div>900+ Tailwind UI Components
Stay in the loop with everything you need to know.