Live preview: https://play.tailwindcss.com/eWD7MgMJIc
<div class="mx-auto max-w-7xl px-4 md:px-12 lg:px-16">
<nav aria-label="Breadcrumb" class="my-6 flex">
<ol role="list" class="flex items-center space-x-2 text-sm text-gray-500">
<li>
<div class="flex items-center">
<a href="#" class="font-medium text-gray-600 hover:text-gray-900">Women</a>
<svg viewBox="0 0 6 20" aria-hidden="true" class="mx-2 h-5 w-2 text-gray-300">
<path d="M4.878 4.34H3.551L.27 16.532h1.327l3.281-12.19z" fill="currentColor" />
</svg>
</div>
</li>
<li>
<div class="flex items-center">
<a href="#" class="font-medium text-gray-600 hover:text-gray-900">Clothing</a>
<svg viewBox="0 0 6 20" aria-hidden="true" class="mx-2 h-5 w-2 text-gray-300">
<path d="M4.878 4.34H3.551L.27 16.532h1.327l3.281-12.19z" fill="currentColor" />
</svg>
</div>
</li>
<li class="font-medium text-gray-900">Basic Tee</li>
</ol>
</nav>
<div class="mx-auto max-w-[1600px] px-6 py-10">
<div class="grid gap-1 lg:grid-cols-[1fr_420px] lg:gap-12">
<!-- Image gallery -->
<div class="relative">
<div class="flex snap-x snap-mandatory gap-2 overflow-x-auto sm:flex-row lg:grid lg:snap-none lg:grid-cols-1 lg:overflow-visible">
<img src="https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-01-featured-product-shot.jpg" alt="" class="col-span-2 aspect-square rounded-lg object-cover sm:col-span-3 lg:col-span-1" />
<img src="https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-01-product-shot-01.jpg" alt="" class="aspect-square rounded-lg object-cover" />
<img src="https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-01-product-shot-02.jpg" alt="" class="aspect-square rounded-lg object-cover" />
<img src="https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-01-product-shot-02.jpg" alt="" class="aspect-square rounded-lg object-cover" />
<img src="https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-01-product-shot-02.jpg" alt="" class="aspect-square rounded-lg object-cover" />
</div>
</div>
<!-- Product info -->
<aside class="top-12 space-y-6 self-start lg:sticky">
<div class="mt-12 flex items-center justify-between md:mt-0">
<h1 class="text-2xl font-bold text-gray-900">Basic Tee</h1>
<p class="text-2xl font-bold text-gray-900">$35</p>
</div>
<!-- Reviews -->
<div class="mt-4">
<h2 class="sr-only">Reviews</h2>
<div class="flex items-center space-x-2">
<p class="text-sm font-medium text-gray-900">3.9 <span class="md:hidden">out of 5 stars</span></p>
<div class="flex">
<svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" /></svg>
<svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" /></svg>
<svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" /></svg>
<svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" /></svg>
<svg class="h-5 w-5 text-gray-200" fill="currentColor" viewBox="0 0 20 20"><path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" /></svg>
</div>
<span class="text-gray-300">·</span>
<a href="#" class="hidden text-sm font-medium text-indigo-600 hover:text-indigo-500 md:flex"> See all 512 reviews </a>
</div>
</div>
<!-- Options -->
<div class="lg:col-span-2">
<form class="space-y-6">
<!-- Color -->
<div>
<h2 class="text-sm font-medium text-gray-900">Color</h2>
<div class="mt-2 flex space-x-3">
<input type="radio" name="color" checked class="h-8 w-8 rounded-full border border-gray-300 bg-black focus:ring-2 focus:ring-indigo-500" />
<input type="radio" name="color" class="h-8 w-8 rounded-full border border-gray-300 bg-gray-400 focus:ring-2 focus:ring-indigo-500" />
</div>
</div>
<!-- Size -->
<div>
<div class="flex items-center justify-between">
<h2 class="text-sm font-medium text-gray-900">Size</h2>
<a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500"> See sizing chart </a>
</div>
<div class="mt-2 grid grid-cols-6 gap-2">
<label class="flex cursor-pointer items-center justify-center rounded-md border py-2 text-sm font-medium"> <input type="radio" name="size" class="sr-only" />XXS </label>
<label class="flex cursor-pointer items-center justify-center rounded-md border py-2 text-sm font-medium"> <input type="radio" name="size" class="sr-only" />XS </label>
<label class="flex cursor-pointer items-center justify-center rounded-md border border-indigo-600 py-2 text-sm font-medium"> <input type="radio" name="size" checked class="sr-only" />S </label>
<label class="flex cursor-pointer items-center justify-center rounded-md border py-2 text-sm font-medium"> <input type="radio" name="size" class="sr-only" />M </label>
<label class="flex cursor-pointer items-center justify-center rounded-md border py-2 text-sm font-medium"> <input type="radio" name="size" class="sr-only" />L </label>
<label class="flex cursor-not-allowed items-center justify-center rounded-md border py-2 text-sm text-gray-400"> XL </label>
</div>
</div>
<div class="space-y-1">
<button class="w-full rounded-md bg-indigo-600 px-6 py-3 text-base font-medium text-white hover:bg-indigo-700">Add to cart</button>
<button class="w-full rounded-md bg-black px-6 py-3 text-base font-medium text-white hover:bg-indigo-700">Buy it now</button>
</div>
</form>
<!-- Description -->
<div class="mt-10">
<h2 class="text-sm font-medium text-gray-900">Description</h2>
<div class="mt-4 space-y-4 text-sm text-gray-600">
<p>Intended to offer comfort and elemental protection in all seasons… (excerpt) :contentReference[oaicite:1]{index=1} Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Reiciendis, rem pariatur! Necessitatibus blanditiis eaque, porro temporibus adipisci sit rerum soluta similique repellat recusandae doloribus fuga molestias ipsa! Officiis doloremque officia laboriosam excepturi voluptate culpa placeat accusantium perferendis asperiores, quidem cupiditate aliquid maiores doloribus qui deleniti deserunt porro assumenda unde obcaecati.</p>
</div>
</div>
<!-- Fabric -->
<div class="mt-8">
<h2 class="text-sm font-medium text-gray-900">Fabric & Care</h2>
<ul class="mt-4 list-disc space-y-2 pl-5 text-sm text-gray-600">
<li>Only the best materials</li>
<li>Ethically and locally made</li>
<li>Pre-washed and pre-shrunk</li>
<li>Machine wash cold</li>
</ul>
</div>
<!-- Policies -->
<section class="mt-10">
<h2 class="text-sm font-medium text-gray-900">Our Policies</h2>
<dl class="mt-4 grid grid-cols-1 gap-6 md:grid-cols-2">
<div class="flex items-start space-x-3">
<svg class="h-6 w-6 text-gray-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
<path d="m6.115 5.19.319 1.913A6 6 0 0 0 8.11 10.36L9.75 12l-.387.775c-.217.433-.132.956.21 1.298l1.348 1.348c.21.21.329.497.329.795v1.089c0 .426.24.815.622 1.006l.153.076c.433.217.956.132 1.298-.21l.723-.723a8.7 8.7 0 0 0 2.288-4.042 1.087 1.087 0 0 0-.358-1.099l-1.33-1.108c-.251-.21-.582-.299-.905-.245l-1.17.195a1.125 1.125 0 0 1-.98-.314l-.295-.295a1.125 1.125 0 0 1 0-1.591l.13-.132a1.125 1.125 0 0 1 1.3-.21l.603.302a.809.809 0 0 0 1.086-1.086L14.25 7.5l1.256-.837a4.5 4.5 0 0 0 1.528-1.732l.146-.292M6.115 5.19A9 9 0 1 0 17.18 4.64M6.115 5.19A8.965 8.965 0 0 1 12 3c1.929 0 3.716.607 5.18 1.64" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<div>
<dt class="text-sm font-medium text-gray-900">International delivery</dt>
<dd class="text-sm text-gray-500">Get your order in 2 years</dd>
</div>
</div>
<div class="flex items-start space-x-3">
<svg class="h-6 w-6 text-gray-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
<path d="M12 6v12..." stroke-linecap="round" stroke-linejoin="round" />
</svg>
<div>
<dt class="text-sm font-medium text-gray-900">Loyalty rewards</dt>
<dd class="text-sm text-gray-500">Don't look at other tees</dd>
</div>
</div>
</dl>
</section>
</div>
</aside>
</div>
</div>
<!-- review and faq tabs -->
<div class="my-16 sm:my-24 lg:col-start-2 lg:row-span-2 lg:mt-0 lg:self-start">
<el-tab-group>
<div class="border-b border-gray-200">
<el-tab-list class="-mb-px flex space-x-8" role="tablist" aria-orientation="horizontal">
<button id="tab-reviews" class="border-b-2 border-indigo-600 py-6 text-sm font-medium text-indigo-600" aria-controls="tab-panel-reviews" role="tab" tabindex="0" aria-selected="true">Customer Reviews</button>
<button id="tab-faq" class="border-b-2 border-transparent py-6 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" aria-controls="tab-panel-faq" role="tab" tabindex="-1" aria-selected="false">FAQ</button>
<button id="tab-license" class="border-b-2 border-transparent py-6 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" aria-controls="tab-panel-license" role="tab" tabindex="-1" aria-selected="false">License</button>
</el-tab-list>
</div>
<el-tab-panels>
<div id="tab-panel-reviews" class="pt-10" role="tabpanel" tabindex="0" aria-labelledby="tab-reviews">
<h3 class="sr-only">Customer Reviews</h3>
<div class="flex space-x-4 text-sm text-gray-500">
<div class="flex-none py-10">
<img src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80" alt="" class="h-10 w-10 rounded-full bg-gray-100" />
</div>
<div class="py-10">
<h3 class="font-medium text-gray-900">Emily Selman</h3>
<p><time datetime="2021-07-16">July 16, 2021</time></p>
<div class="mt-4 flex items-center">
<!-- Active: "text-yellow-400", Default: "text-gray-300" -->
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-yellow-400">
<path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" fill-rule="evenodd"></path>
</svg>
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-yellow-400">
<path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" fill-rule="evenodd"></path>
</svg>
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-yellow-400">
<path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" fill-rule="evenodd"></path>
</svg>
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-yellow-400">
<path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" fill-rule="evenodd"></path>
</svg>
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-yellow-400">
<path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" fill-rule="evenodd"></path>
</svg>
</div>
<p class="sr-only">5 out of 5 stars</p>
<div class="mt-4 space-y-6">
<p>This icon pack is just what I need for my latest project. There's an icon for just about anything I could ever need. Love the playful look!</p>
</div>
</div>
</div>
<div class="flex space-x-4 text-sm text-gray-500">
<div class="flex-none py-10">
<img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80" alt="" class="h-10 w-10 rounded-full bg-gray-100" />
</div>
<div class="border-t border-gray-200 py-10">
<h3 class="font-medium text-gray-900">Hector Gibbons</h3>
<p><time datetime="2021-07-12">July 12, 2021</time></p>
<div class="mt-4 flex items-center">
<!-- Active: "text-yellow-400", Default: "text-gray-300" -->
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-yellow-400">
<path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" fill-rule="evenodd"></path>
</svg>
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-yellow-400">
<path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" fill-rule="evenodd"></path>
</svg>
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-yellow-400">
<path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" fill-rule="evenodd"></path>
</svg>
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-yellow-400">
<path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" fill-rule="evenodd"></path>
</svg>
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-yellow-400">
<path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" fill-rule="evenodd"></path>
</svg>
</div>
<p class="sr-only">5 out of 5 stars</p>
<div class="mt-4 space-y-6">
<p>Blown away by how polished this icon pack is. Everything looks so consistent and each SVG is optimized out of the box so I can use it directly with confidence. It would take me several hours to create a single icon this good, so it's a steal at this price.</p>
</div>
</div>
</div>
<div class="flex space-x-4 text-sm text-gray-500">
<div class="flex-none py-10">
<img src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixqx=oilqXxSqey&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" class="h-10 w-10 rounded-full bg-gray-100" />
</div>
<div class="border-t border-gray-200 py-10">
<h3 class="font-medium text-gray-900">Mark Edwards</h3>
<p><time datetime="2021-07-06">July 6, 2021</time></p>
<div class="mt-4 flex items-center">
<!-- Active: "text-yellow-400", Default: "text-gray-300" -->
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-yellow-400">
<path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" fill-rule="evenodd"></path>
</svg>
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-yellow-400">
<path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" fill-rule="evenodd"></path>
</svg>
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-yellow-400">
<path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" fill-rule="evenodd"></path>
</svg>
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-yellow-400">
<path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" fill-rule="evenodd"></path>
</svg>
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-gray-300">
<path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" fill-rule="evenodd"></path>
</svg>
</div>
<p class="sr-only">4 out of 5 stars</p>
<div class="mt-4 space-y-6">
<p>Really happy with look and options of these icons. I've found uses for them everywhere in my recent projects. I hope there will be 20px versions in the future!</p>
</div>
</div>
</div>
</div>
<div id="tab-panel-faq" hidden="" class="text-sm text-gray-500" role="tabpanel" tabindex="0" aria-labelledby="tab-faq">
<h3 class="sr-only">Frequently Asked Questions</h3>
<dl>
<dt class="mt-10 font-medium text-gray-900">What format are these icons?</dt>
<dd class="mt-2 space-y-6">
<p>The icons are in SVG (Scalable Vector Graphic) format. They can be imported into your design tool of choice and used directly in code.</p>
</dd>
<dt class="mt-10 font-medium text-gray-900">Can I use the icons at different sizes?</dt>
<dd class="mt-2 space-y-6">
<p>Yes. The icons are drawn on a 24 x 24 pixel grid, but the icons can be scaled to different sizes as needed. We don't recommend going smaller than 20 x 20 or larger than 64 x 64 to retain legibility and visual balance.</p>
</dd>
<dt class="mt-10 font-medium text-gray-900">Do I have to add attribution to my projects?</dt>
<dd class="mt-2 space-y-6">
<p>No. You are allowed to use these icons freely in your personal and professional work. If you enjoy the icon pack, feel free to tell others!</p>
</dd>
</dl>
</div>
<div id="tab-panel-license" hidden="" class="pt-10" role="tabpanel" tabindex="0" aria-labelledby="tab-license">
<h3 class="sr-only">License</h3>
<div class="prose prose-sm text-gray-500">
<h4>Overview</h4>
<p>For personal and professional use. You cannot resell or redistribute these icons in their original or modified state.</p>
<ul class="list-disc px-4">
<li>You're allowed to use the icons in unlimited projects.</li>
<li>Attribution is not required to use the icons.</li>
</ul>
<h4>What you can do with it</h4>
<ul class="list-disc px-4">
<li>Use them freely in your personal and professional work.</li>
<li>Make them your own. Change the colors to suit your project or brand.</li>
</ul>
<h4>What you can't do with it</h4>
<ul class="list-disc px-4">
<li>Don't be greedy. Selling or distributing these icons in their original or modified state is prohibited.</li>
<li>Don't be evil. These icons cannot be used on websites or applications that promote illegal or immoral beliefs or activities.</li>
</ul>
</div>
</div>
</el-tab-panels>
</el-tab-group>
</div>
</div>
Views
Lines
Characters
Likes