Sha256: 895c9d0b6813906bd6e5bee15fc1e8949e739b38c23f6726242e86c2cbfa563d
Contents?: true
Size: 1.64 KB
Versions: 29
Compression:
Stored size: 1.64 KB
Contents
<!--
This example requires some changes to your config:
```
// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...
require('@tailwindcss/aspect-ratio'),
],
}
```
-->
<div class="bg-white">
<div class="mx-auto max-w-7xl py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
<div class="sm:flex sm:items-baseline sm:justify-between">
<h2 class="text-2xl font-bold tracking-tight text-gray-900">Our Favorites</h2>
<a href="#" class="hidden text-sm font-semibold text-indigo-600 hover:text-indigo-500 sm:block">
Browse all favorites
<span aria-hidden="true"> →</span>
</a>
</div>
<div class="mt-6 grid grid-cols-1 gap-y-10 sm:grid-cols-3 sm:gap-y-0 sm:gap-x-6 lg:gap-x-8">
<div class="group relative">
<div class="h-96 w-full overflow-hidden rounded-lg group-hover:opacity-75 sm:aspect-w-2 sm:aspect-h-3 sm:h-auto">
<img src="https://tailwindui.com/img/ecommerce-images/home-page-03-favorite-01.jpg" alt="Model wearing women's black cotton crewneck tee." class="h-full w-full object-cover object-center">
</div>
<h3 class="mt-4 text-base font-semibold text-gray-900">
<a href="#">
<span class="absolute inset-0"></span>
Black Basic Tee
</a>
</h3>
<p class="mt-1 text-sm text-gray-500">$32</p>
</div>
<!-- More products... -->
</div>
<div class="mt-6 sm:hidden">
<a href="#" class="block text-sm font-semibold text-indigo-600 hover:text-indigo-500">
Browse all favorites
<span aria-hidden="true"> →</span>
</a>
</div>
</div>
</div>
Version data entries
29 entries across 29 versions & 1 rubygems