components
Tailwind CSS Card
<div class="mx-auto max-w-md rounded-lg bg-white shadow">
<div class="p-4">
<h3 class="text-xl font-medium text-gray-900">Migrating to Sailboat UI</h3>
<p class="mt-1 text-gray-500">Sailboat UI is a modern UI component library for Tailwind CSS. Get started with 150+ open source components.</p>
</div>
</div>
<div class="mx-auto max-w-md overflow-hidden rounded-lg bg-white shadow">
<img src="https://images.unsplash.com/photo-1552581234-26160f608093?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" class="aspect-video w-full object-cover" alt="" />
<div class="p-4">
<p class="mb-1 text-sm text-primary-500">Andrea Felsted • <time>18 Nov 2022</time></p>
<h3 class="text-xl font-medium text-gray-900">Migrating to Sailboat UI</h3>
<p class="mt-1 text-gray-500">Sailboat UI is a modern UI component library for Tailwind CSS. Get started with 150+ open source components.</p>
<div class="mt-4 flex gap-2">
<span class="inline-flex items-center gap-1 rounded-full bg-blue-50 px-2 py-1 text-xs font-semibold text-blue-600"> Design </span>
<span class="inline-flex items-center gap-1 rounded-full bg-indigo-50 px-2 py-1 text-xs font-semibold text-indigo-600"> Product </span>
<span class="inline-flex items-center gap-1 rounded-full bg-orange-50 px-2 py-1 text-xs font-semibold text-orange-600"> Develop </span>
</div>
</div>
</div>
<div class="relative mx-auto max-w-md overflow-hidden rounded-lg bg-white shadow">
<div>
<img src="https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" class="w-full object-cover" alt="" />
</div>
<div class="absolute inset-0 z-10 bg-gradient-to-t from-black"></div>
<div class="absolute inset-x-0 bottom-0 z-20 p-4">
<p class="mb-1 text-sm text-white text-opacity-80">Andrea Felsted • <time>18 Nov 2022</time></p>
<h3 class="text-xl font-medium text-white">Migrating to Sailboat UI</h3>
<p class="mt-1 text-white text-opacity-80">Sailboat UI is a modern UI component library for Tailwind CSS. Get started with 150+ open source components.</p>
</div>
</div>
<div class="mx-auto max-w-md overflow-hidden rounded-lg bg-white shadow">
<ul class="divide-y divide-gray-100 py-2 px-4">
<li class="flex py-4">
<div class="mr-4 flex-1">
<h4 class="text-lg font-medium text-gray-900">The Bank of England Risks Hiking Too Far Ahead</h4>
<div class="mt-1 text-sm text-gray-400"><span>Business</span> • <time>18 Nov 2022</time></div>
</div>
<div>
<img src="https://images.unsplash.com/photo-1631016800696-5ea8801b3c2a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=927&q=80" class="h-20 w-20 rounded-lg object-cover" alt="" />
</div>
</li>
<li class="flex py-4">
<div class="mr-4 flex-1">
<h4 class="text-lg font-medium text-gray-900">The Bank of England Risks Hiking Too Far Ahead</h4>
<div class="mt-1 text-sm text-gray-400"><span>Business</span> • <time>18 Nov 2022</time></div>
</div>
<div>
<img src="https://images.unsplash.com/photo-1550510537-89d5433de5cb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" class="h-20 w-20 rounded-lg object-cover" alt="" />
</div>
</li>
<li class="flex py-4">
<div class="mr-4 flex-1">
<h4 class="text-lg font-medium text-gray-900">The Bank of England Risks Hiking Too Far Ahead</h4>
<div class="mt-1 text-sm text-gray-400"><span>Business</span> • <time>18 Nov 2022</time></div>
</div>
<div>
<img src="https://images.unsplash.com/photo-1587614380862-0294308ae58b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" class="h-20 w-20 rounded-lg object-cover" alt="" />
</div>
</li>
</ul>
</div>