Blog Sections
Quickly get a project started with any of our examples ranging from using parts of the UI to custom components and layouts using Tailwind CSS.
2-grids List
<!-- Card Blog -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Grid -->
<div class="grid lg:grid-cols-2 lg:gap-y-16 gap-10">
<!-- Card -->
<a class="group rounded-xl overflow-hidden" href="#">
<div class="sm:flex">
<div class="flex-shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
<img class="group-hover:scale-105 transition-transform duration-500 ease-in-out w-full h-full absolute top-0 left-0 object-cover rounded-xl" src="https://images.unsplash.com/photo-1540575861501-7cf05a4b125a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" alt="Image Description">
</div>
<div class="grow mt-4 sm:mt-0 sm:ml-6 px-4 sm:px-0">
<h3 class="text-xl font-semibold text-gray-800 group-hover:text-gray-600 dark:text-gray-300 dark:group-hover:text-white">
Studio by Preline
</h3>
<p class="mt-3 text-gray-600 dark:text-gray-400">
Produce professional, reliable streams easily leveraging Preline's innovative broadcast studio
</p>
<p class="mt-4 inline-flex items-center gap-x-1.5 text-blue-600 decoration-2 hover:underline font-medium">
Read more
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</p>
</div>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group rounded-xl overflow-hidden" href="#">
<div class="sm:flex">
<div class="flex-shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
<img class="group-hover:scale-105 transition-transform duration-500 ease-in-out w-full h-full absolute top-0 left-0 object-cover rounded-xl" src="https://images.unsplash.com/photo-1668906093328-99601a1aa584?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=986&q=80" alt="Image Description">
</div>
<div class="grow mt-4 sm:mt-0 sm:ml-6 px-4 sm:px-0">
<h3 class="text-xl font-semibold text-gray-800 group-hover:text-gray-600 dark:text-gray-300 dark:group-hover:text-white">
Onsite
</h3>
<p class="mt-3 text-gray-600 dark:text-gray-400">
Optimize your in-person experience with best-in-class capabilities like badge printing and lead retrieval
</p>
<p class="mt-4 inline-flex items-center gap-x-1.5 text-blue-600 decoration-2 hover:underline font-medium">
Read more
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</p>
</div>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group rounded-xl overflow-hidden" href="#">
<div class="sm:flex">
<div class="flex-shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
<img class="group-hover:scale-105 transition-transform duration-500 ease-in-out w-full h-full absolute top-0 left-0 object-cover rounded-xl" src="https://images.unsplash.com/photo-1567016526105-22da7c13161a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80" alt="Image Description">
</div>
<div class="grow mt-4 sm:mt-0 sm:ml-6 px-4 sm:px-0">
<h3 class="text-xl font-semibold text-gray-800 group-hover:text-gray-600 dark:text-gray-300 dark:group-hover:text-white">
The complete guide to OKRs
</h3>
<p class="mt-3 text-gray-600 dark:text-gray-400">
How to make objectives and key results work for your company
</p>
<p class="mt-4 inline-flex items-center gap-x-1.5 text-blue-600 decoration-2 hover:underline font-medium">
Read more
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</p>
</div>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group rounded-xl overflow-hidden" href="#">
<div class="sm:flex">
<div class="flex-shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
<img class="group-hover:scale-105 transition-transform duration-500 ease-in-out w-full h-full absolute top-0 left-0 object-cover rounded-xl" src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" alt="Image Description">
</div>
<div class="grow mt-4 sm:mt-0 sm:ml-6 px-4 sm:px-0">
<h3 class="text-xl font-semibold text-gray-800 group-hover:text-gray-600 dark:text-gray-300 dark:group-hover:text-white">
People program models
</h3>
<p class="mt-3 text-gray-600 dark:text-gray-400">
Six approaches to bringing your People strategy to life
</p>
<p class="mt-4 inline-flex items-center gap-x-1.5 text-blue-600 decoration-2 hover:underline font-medium">
Read more
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</p>
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Grid -->
</div>
<!-- End Card Blog -->
3-grids with an Overlay Card
<!-- Card Blog -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Title -->
<div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Insights</h2>
<p class="mt-1 text-gray-600 dark:text-gray-400">Stay in the know with insights from industry experts.</p>
</div>
<!-- End Title -->
<!-- Grid -->
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card -->
<a class="group rounded-xl overflow-hidden" href="#">
<div class="relative pt-[50%] sm:pt-[70%] rounded-xl overflow-hidden">
<img class="w-full h-full absolute top-0 left-0 object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl" src="https://images.unsplash.com/photo-1586232702178-f044c5f4d4b7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80" alt="Image Description">
<span class="absolute top-0 right-0 rounded-tr-xl rounded-bl-xl text-xs font-medium bg-gray-800 text-white py-1.5 px-3 dark:bg-gray-900">
Sponsored
</span>
</div>
<div class="mt-7">
<h3 class="text-xl font-semibold text-gray-800 group-hover:text-gray-600 dark:text-gray-200">
Studio by Preline
</h3>
<p class="mt-3 text-gray-800 dark:text-gray-200">
Produce professional, reliable streams easily leveraging Preline's innovative broadcast studio
</p>
<p class="mt-5 inline-flex items-center gap-x-1.5 text-blue-600 decoration-2 group-hover:underline font-medium">
Read more
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</p>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group rounded-xl overflow-hidden" href="#">
<div class="relative pt-[50%] sm:pt-[70%] rounded-xl overflow-hidden">
<img class="w-full h-full absolute top-0 left-0 object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl" src="https://images.unsplash.com/photo-1542125387-c71274d94f0a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" alt="Image Description">
</div>
<div class="mt-7">
<h3 class="text-xl font-semibold text-gray-800 group-hover:text-gray-600 dark:text-gray-200">
Onsite
</h3>
<p class="mt-3 text-gray-800 dark:text-gray-200">
Optimize your in-person experience with best-in-class capabilities like badge printing and lead retrieval
</p>
<p class="mt-5 inline-flex items-center gap-x-1.5 text-blue-600 decoration-2 group-hover:underline font-medium">
Read more
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</p>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group relative flex flex-col w-full min-h-[15rem] bg-center bg-cover rounded-xl hover:shadow-lg transition bg-[url('https://images.unsplash.com/photo-1634017839464-5c339ebe3cb4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3000&q=80')]" href="#">
<div class="flex-auto p-4 md:p-6">
<h3 class="text-xl text-white/[.9] group-hover:text-white"><span class="font-bold">Preline</span> Press publishes books about economic and technological advancement.</h3>
</div>
<div class="pt-0 p-4 md:p-6">
<div class="inline-flex items-center gap-2 text-sm font-medium text-white group-hover:text-white/[.7]">
Visit the site
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Grid -->
</div>
<!-- End Card Blog -->
Hero Style
<!-- Card Blog -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Grid -->
<div class="grid sm:grid-cols-2 sm:items-center gap-8">
<div class="sm:order-2">
<div class="relative pt-[50%] sm:pt-[100%] rounded-lg">
<img class="w-full h-full absolute top-0 left-0 object-cover rounded-lg" src="https://images.unsplash.com/photo-1606868306217-dbf5046868d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1981&q=80" alt="Image Description">
</div>
</div>
<!-- End Col -->
<div class="sm:order-1">
<p class="mb-5 inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200">
Business insight
</p>
<h2 class="text-2xl font-bold md:text-3xl lg:text-4xl lg:leading-tight xl:text-5xl xl:leading-tight text-gray-800 dark:text-gray-200">
<a class="hover:text-blue-600 dark:text-gray-300 dark:hover:text-white" href="#">
How to get buy-in and budget for direct hiring
</a>
</h2>
<!-- Avatar -->
<div class="mt-6 sm:mt-10 flex items-center">
<div class="flex-shrink-0">
<img class="h-10 w-10 sm:h-14 sm:w-14 rounded-full" src="https://images.unsplash.com/photo-1669837401587-f9a4cfe3126e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Image Description">
</div>
<div class="ml-3 sm:ml-4">
<p class="sm:mb-1 font-semibold text-gray-800 dark:text-gray-200">
Louise Donadieu
</p>
<p class="text-xs text-gray-500">
Strategic Marketing Consultant
</p>
</div>
</div>
<!-- End Avatar -->
<div class="mt-5">
<a class="inline-flex items-center gap-x-1.5 text-blue-600 decoration-2 hover:underline font-medium" href="#">
Read more
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</a>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Grid -->
</div>
<!-- End Card Blog -->
Image Overlay
<!-- Card Blog -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Grid -->
<div class="grid lg:grid-cols-2 gap-6">
<!-- Card -->
<a class="group relative block" href="#">
<div class="flex-shrink-0 relative w-full rounded-xl overflow-hidden w-full h-[350px] before:absolute before:inset-x-0 before:w-full before:h-full before:bg-gradient-to-t before:from-gray-900/[.7] before:z-[1]">
<img class="w-full h-full absolute top-0 left-0 object-cover" src="https://images.unsplash.com/photo-1669828230990-9b8583a877ab?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1062&q=80" alt="Image Description">
</div>
<div class="absolute top-0 inset-x-0 z-10">
<div class="p-4 flex flex-col h-full sm:p-6">
<!-- Avatar -->
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-[2.875rem] w-[2.875rem] border-2 border-white rounded-full" src="https://images.unsplash.com/photo-1669837401587-f9a4cfe3126e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Image Description">
</div>
<div class="ml-2.5 sm:ml-4">
<h4 class="font-semibold text-white">
Gloria
</h4>
<p class="text-xs text-white/[.8]">
Jan 09, 2021
</p>
</div>
</div>
<!-- End Avatar -->
</div>
</div>
<div class="absolute bottom-0 inset-x-0 z-10">
<div class="flex flex-col h-full p-4 sm:p-6">
<h3 class="text-lg sm:text-3xl font-semibold text-white group-hover:text-white/[.8]">
Facebook is creating a news section in Watch to feature breaking news
</h3>
<p class="mt-2 text-white/[.8]">
Facebook launched the Watch platform in August
</p>
</div>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group relative block" href="#">
<div class="flex-shrink-0 relative w-full rounded-xl overflow-hidden w-full h-[350px] before:absolute before:inset-x-0 before:w-full before:h-full before:bg-gradient-to-t before:from-gray-900/[.7] before:z-[1]">
<img class="w-full h-full absolute top-0 left-0 object-cover" src="https://images.unsplash.com/photo-1611625618313-68b87aaa0626?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80" alt="Image Description">
</div>
<div class="absolute top-0 inset-x-0 z-10">
<div class="p-4 flex flex-col h-full sm:p-6">
<!-- Avatar -->
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-[2.875rem] w-[2.875rem] border-2 border-white rounded-full" src="https://images.unsplash.com/photo-1669837401587-f9a4cfe3126e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Image Description">
</div>
<div class="ml-2.5 sm:ml-4">
<h4 class="font-semibold text-white">
Gloria
</h4>
<p class="text-xs text-white/[.8]">
May 30, 2021
</p>
</div>
</div>
<!-- End Avatar -->
</div>
</div>
<div class="absolute bottom-0 inset-x-0 z-10">
<div class="flex flex-col h-full p-4 sm:p-6">
<h3 class="text-lg sm:text-3xl font-semibold text-white group-hover:text-white/[.8]">
What CFR (Conversations, Feedback, Recognition) really is about
</h3>
<p class="mt-2 text-white/[.8]">
For a lot of people these days, Measure What Matters.
</p>
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Grid -->
</div>
<!-- End Card Blog -->
Image Card with Subtitle and Title
<!-- Card Blog -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Title -->
<div class="max-w-2xl text-center mx-auto mb-10 lg:mb-14">
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Read our latest news</h2>
<p class="mt-1 text-gray-600 dark:text-gray-400">We've helped some great companies brand, design and get to market.</p>
</div>
<!-- End Title -->
<!-- Grid -->
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-10 lg:mb-14">
<!-- Card -->
<a class="group flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-md transition dark:bg-slate-900 dark:border-gray-800" href="#">
<div class="aspect-w-16 aspect-h-9">
<img class="w-full object-cover rounded-t-xl" src="https://images.unsplash.com/photo-1668869713519-9bcbb0da7171?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988&q=80" alt="Image Description">
</div>
<div class="p-4 md:p-5">
<p class="mt-2 text-xs uppercase text-gray-600 dark:text-gray-400">
Product
</p>
<h3 class="mt-2 text-lg font-medium text-gray-800 group-hover:text-blue-600 dark:text-gray-300 dark:group-hover:text-white">
Better is when everything works together
</h3>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-md transition dark:bg-slate-900 dark:border-gray-800" href="#">
<div class="aspect-w-16 aspect-h-9">
<img class="w-full object-cover rounded-t-xl" src="https://images.unsplash.com/photo-1668584054035-f5ba7d426401?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3465&q=80" alt="Image Description">
</div>
<div class="p-4 md:p-5">
<p class="mt-2 text-xs uppercase text-gray-600 dark:text-gray-400">
Business
</p>
<h3 class="mt-2 text-lg font-medium text-gray-800 group-hover:text-blue-600 dark:text-gray-300 dark:group-hover:text-white">
What CFR really is about
</h3>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-md transition dark:bg-slate-900 dark:border-gray-800" href="#">
<div class="aspect-w-16 aspect-h-9">
<img class="w-full object-cover rounded-t-xl" src="https://images.unsplash.com/photo-1668863699009-1e3b4118675d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3387&q=80" alt="Image Description">
</div>
<div class="p-4 md:p-5">
<p class="mt-2 text-xs uppercase text-gray-600 dark:text-gray-400">
Business
</p>
<h3 class="mt-2 text-lg font-medium text-gray-800 group-hover:text-blue-600 dark:text-gray-300 dark:group-hover:text-white">
Should Product Owners think like entrepreneurs?
</h3>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-md transition dark:bg-slate-900 dark:border-gray-800" href="#">
<div class="aspect-w-16 aspect-h-9">
<img class="w-full object-cover rounded-t-xl" src="https://images.unsplash.com/photo-1668584054131-d5721c515211?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80" alt="Image Description">
</div>
<div class="p-4 md:p-5">
<p class="mt-2 text-xs uppercase text-gray-600 dark:text-gray-400">
Facilitate
</p>
<h3 class="mt-2 text-lg font-medium text-gray-800 group-hover:text-blue-600 dark:text-gray-300 dark:group-hover:text-white">
Announcing Front Strategies: Ready-to-use rules
</h3>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Grid -->
<!-- Card -->
<div class="text-center">
<div class="inline-block bg-white border shadow-sm rounded-full dark:bg-slate-900 dark:border-gray-800">
<div class="py-3 px-4 flex items-center gap-x-2">
<p class="text-gray-600 dark:text-gray-400">
Want to read more?
</p>
<a class="inline-flex items-center gap-x-1.5 text-blue-600 decoration-2 hover:underline font-medium" href="../docs/index.html">
Go here
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</a>
</div>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Card Blog -->
Horizontal Style
<!-- Card Blog -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Grid -->
<div class="grid lg:grid-cols-2 gap-6">
<!-- Card -->
<a class="group sm:flex" href="#">
<div class="flex-shrink-0 relative rounded-xl overflow-hidden w-full h-[200px] sm:w-[250px] sm:h-[350px]">
<img class="w-full h-full absolute top-0 left-0 object-cover" src="https://images.unsplash.com/photo-1664574654529-b60630f33fdb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" alt="Image Description">
</div>
<div class="grow">
<div class="p-4 flex flex-col h-full sm:p-6">
<div class="mb-3">
<p class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200">
Business
</p>
</div>
<h3 class="text-lg sm:text-2xl font-semibold text-gray-800 group-hover:text-blue-600 dark:text-gray-300 dark:group-hover:text-white">
Preline becomes an official Instagram Marketing Partner
</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400">
Great news we're eager to share.
</p>
<div class="mt-5 sm:mt-auto">
<!-- Avatar -->
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-[2.875rem] w-[2.875rem] rounded-full" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Image Description">
</div>
<div class="ml-2.5 sm:ml-4">
<h4 class="font-semibold text-gray-800 dark:text-gray-200">
Aaron Larsson
</h4>
<p class="text-xs text-gray-500">
Feb 15, 2021
</p>
</div>
</div>
<!-- End Avatar -->
</div>
</div>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group sm:flex" href="#">
<div class="flex-shrink-0 relative rounded-xl overflow-hidden w-full h-[200px] sm:w-[250px] sm:h-[350px]">
<img class="w-full h-full absolute top-0 left-0 object-cover" src="https://images.unsplash.com/photo-1669824774762-65ddf29bee56?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" alt="Image Description">
</div>
<div class="grow">
<div class="p-4 flex flex-col h-full sm:p-6">
<div class="mb-3">
<p class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200">
Announcements
</p>
</div>
<h3 class="text-lg sm:text-2xl font-semibold text-gray-800 group-hover:text-blue-600 dark:text-gray-300 dark:group-hover:text-white">
Announcing a free plan for small teams
</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400">
At Wake, our mission has always been focused on bringing openness.
</p>
<div class="mt-5 sm:mt-auto">
<!-- Avatar -->
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-[2.875rem] w-[2.875rem] rounded-full" src="https://images.unsplash.com/photo-1669720229052-89cda125fc3f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Image Description">
</div>
<div class="ml-2.5 sm:ml-4">
<h4 class="font-semibold text-gray-800 dark:text-gray-200">
Hanna Wolfe
</h4>
<p class="text-xs text-gray-500">
Feb 4, 2021
</p>
</div>
</div>
<!-- End Avatar -->
</div>
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Grid -->
</div>
<!-- End Card Blog -->
Card with Background Gray on Hover
<!-- Card Blog -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Title -->
<div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Customer stories</h2>
<p class="mt-1 text-gray-600 dark:text-gray-400">See how game-changing companies are making the most of every engagement with Preline.</p>
</div>
<!-- End Title -->
<!-- Grid -->
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card -->
<a class="group hover:bg-gray-100 rounded-xl p-5 transition-all dark:hover:bg-white/[.05]" href="#">
<div class="aspect-w-16 aspect-h-10">
<img class="w-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1661956602116-aa6865609028?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80" alt="Image Description">
</div>
<h3 class="mt-5 text-xl text-gray-800 dark:text-gray-300 dark:group-hover:text-white">
Unity’s inside sales team drives 80% of its revenue with Preline.
</h3>
<p class="mt-3 inline-flex items-center gap-x-2 text-sm font-semibold text-gray-800 dark:text-gray-200">
Learn more
<svg class="w-2.5 h-2.5 transition ease-in-out group-hover:translate-x-1" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.975821 6.92249C0.43689 6.92249 -3.50468e-07 7.34222 -3.27835e-07 7.85999C-3.05203e-07 8.37775 0.43689 8.79749 0.975821 8.79749L12.7694 8.79748L7.60447 13.7596C7.22339 14.1257 7.22339 14.7193 7.60447 15.0854C7.98555 15.4515 8.60341 15.4515 8.98449 15.0854L15.6427 8.68862C16.1191 8.23098 16.1191 7.48899 15.6427 7.03134L8.98449 0.634573C8.60341 0.268455 7.98555 0.268456 7.60447 0.634573C7.22339 1.00069 7.22339 1.59428 7.60447 1.9604L12.7694 6.92248L0.975821 6.92249Z" fill="currentColor"/>
</svg>
</p>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group hover:bg-gray-100 rounded-xl p-5 transition-all dark:hover:bg-white/[.05]" href="#">
<div class="aspect-w-16 aspect-h-10">
<img class="w-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1669739432571-aee1f057c41f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1065&q=80" alt="Image Description">
</div>
<h3 class="mt-5 text-xl text-gray-800 dark:text-gray-300 dark:group-hover:text-white">
Living Spaces creates a unified experience across the customer journey.
</h3>
<p class="mt-3 inline-flex items-center gap-x-2 text-sm font-semibold text-gray-800 dark:text-gray-200">
Learn more
<svg class="w-2.5 h-2.5 transition ease-in-out group-hover:translate-x-1" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.975821 6.92249C0.43689 6.92249 -3.50468e-07 7.34222 -3.27835e-07 7.85999C-3.05203e-07 8.37775 0.43689 8.79749 0.975821 8.79749L12.7694 8.79748L7.60447 13.7596C7.22339 14.1257 7.22339 14.7193 7.60447 15.0854C7.98555 15.4515 8.60341 15.4515 8.98449 15.0854L15.6427 8.68862C16.1191 8.23098 16.1191 7.48899 15.6427 7.03134L8.98449 0.634573C8.60341 0.268455 7.98555 0.268456 7.60447 0.634573C7.22339 1.00069 7.22339 1.59428 7.60447 1.9604L12.7694 6.92248L0.975821 6.92249Z" fill="currentColor"/>
</svg>
</p>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group hover:bg-gray-100 rounded-xl p-5 transition-all dark:hover:bg-white/[.05]" href="#">
<div class="aspect-w-16 aspect-h-10">
<img class="w-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1657299171054-e679f630a776?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" alt="Image Description">
</div>
<h3 class="mt-5 text-xl text-gray-800 dark:text-gray-300 dark:group-hover:text-white">
Atlassian powers sales and support at scale with Preline.
</h3>
<p class="mt-3 inline-flex items-center gap-x-2 text-sm font-semibold text-gray-800 dark:text-gray-200">
Learn more
<svg class="w-2.5 h-2.5 transition ease-in-out group-hover:translate-x-1" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.975821 6.92249C0.43689 6.92249 -3.50468e-07 7.34222 -3.27835e-07 7.85999C-3.05203e-07 8.37775 0.43689 8.79749 0.975821 8.79749L12.7694 8.79748L7.60447 13.7596C7.22339 14.1257 7.22339 14.7193 7.60447 15.0854C7.98555 15.4515 8.60341 15.4515 8.98449 15.0854L15.6427 8.68862C16.1191 8.23098 16.1191 7.48899 15.6427 7.03134L8.98449 0.634573C8.60341 0.268455 7.98555 0.268456 7.60447 0.634573C7.22339 1.00069 7.22339 1.59428 7.60447 1.9604L12.7694 6.92248L0.975821 6.92249Z" fill="currentColor"/>
</svg>
</p>
</a>
<!-- End Card -->
</div>
<!-- End Grid -->
</div>
<!-- End Card Blog -->
Brand Color on Hover
<!-- Card Blog -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Title -->
<div class="max-w-2xl mb-10">
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Customer stories</h2>
<p class="mt-1 text-gray-600 dark:text-gray-400">See how game-changing companies are making the most of every engagement with Preline.</p>
</div>
<!-- End Title -->
<!-- Grid -->
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Card -->
<a class="group block" href="#">
<div class="aspect-w-16 aspect-h-9">
<img class="w-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1668869713519-9bcbb0da7171?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988&q=80" alt="Image Description">
</div>
<h3 class="mt-2 text-lg font-medium text-gray-800 group-hover:text-blue-600 dark:text-gray-300 dark:group-hover:text-white">
Unity’s inside sales team drives 80% of its revenue with Preline.
</h3>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
September 12, 2022
</p>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group block" href="#">
<div class="aspect-w-16 aspect-h-9">
<img class="w-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1668584054035-f5ba7d426401?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3465&q=80" alt="Image Description">
</div>
<h3 class="mt-2 text-lg font-medium text-gray-800 group-hover:text-blue-600 dark:text-gray-300 dark:group-hover:text-white">
Living Spaces creates a unified experience across the customer journey.
</h3>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
September 12, 2022
</p>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group block" href="#">
<div class="aspect-w-16 aspect-h-9">
<img class="w-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1668863699009-1e3b4118675d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3387&q=80" alt="Image Description">
</div>
<h3 class="mt-2 text-lg font-medium text-gray-800 group-hover:text-blue-600 dark:text-gray-300 dark:group-hover:text-white">
Atlassian powers sales and support at scale with Preline.
</h3>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
September 12, 2022
</p>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group block" href="#">
<div class="aspect-w-16 aspect-h-9">
<img class="w-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1668584054131-d5721c515211?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80" alt="Image Description">
</div>
<h3 class="mt-2 text-lg font-medium text-gray-800 group-hover:text-blue-600 dark:text-gray-300 dark:group-hover:text-white">
Everything you need to know about Preline Pro.
</h3>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
September 12, 2022
</p>
</a>
<!-- End Card -->
</div>
<!-- End Grid -->
</div>
<!-- End Card Blog -->
Bordered Cards with Authors
<!-- Card Blog -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Title -->
<div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">The Blog</h2>
<p class="mt-1 text-gray-600 dark:text-gray-400">See how game-changing companies are making the most of every engagement with Preline.</p>
</div>
<!-- End Title -->
<!-- Grid -->
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card -->
<a class="group flex flex-col h-full border border-gray-200 hover:border-transparent hover:shadow-lg transition-all duration-300 rounded-xl p-5 dark:border-gray-700 dark:hover:border-transparent dark:hover:shadow-black/[.4]" href="#">
<div class="aspect-w-16 aspect-h-11">
<img class="w-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1633114128174-2f8aa49759b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" alt="Image Description">
</div>
<div class="my-6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-300 dark:group-hover:text-white">
Announcing a free plan for small teams
</h3>
<p class="mt-5 text-gray-600 dark:text-gray-400">
At Wake, our mission has always been focused on bringing openness.
</p>
</div>
<div class="mt-auto flex items-center gap-x-3">
<img class="w-8 h-8 rounded-full" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Image Description">
<div>
<h5 class="text-sm text-gray-800 dark:text-gray-200">By Lauren Waller</h5>
</div>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group flex flex-col h-full border border-gray-200 hover:border-transparent hover:shadow-lg transition-all duration-300 rounded-xl p-5 dark:border-gray-700 dark:hover:border-transparent dark:hover:shadow-black/[.4]" href="#">
<div class="aspect-w-16 aspect-h-11">
<img class="w-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1562851529-c370841f6536?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80" alt="Image Description">
</div>
<div class="my-6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-300 dark:group-hover:text-white">
How Google Assistant now helps you record stories for kids
</h3>
<p class="mt-5 text-gray-600 dark:text-gray-400">
Google is constantly updating its consumer AI, Google Assistant, with new features.
</p>
</div>
<div class="mt-auto flex items-center gap-x-3">
<img class="w-8 h-8 rounded-full" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Image Description">
<div>
<h5 class="text-sm text-gray-800 dark:text-gray-200">By Aaron Larsson</h5>
</div>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group flex flex-col h-full border border-gray-200 hover:border-transparent hover:shadow-lg transition-all duration-300 rounded-xl p-5 dark:border-gray-700 dark:hover:border-transparent dark:hover:shadow-black/[.4]" href="#">
<div class="aspect-w-16 aspect-h-11">
<img class="w-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1521321205814-9d673c65c167?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3548&q=80" alt="Image Description">
</div>
<div class="my-6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-300 dark:group-hover:text-white">
Front accounts - let's work together
</h3>
<p class="mt-5 text-gray-600 dark:text-gray-400">
Are you an accountant? Are you a company formation advisor?
</p>
</div>
<div class="mt-auto flex items-center gap-x-3">
<img class="w-8 h-8 rounded-full" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Image Description">
<div>
<h5 class="text-sm text-gray-800 dark:text-gray-200">By Lauren Waller</h5>
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Grid -->
<!-- Card -->
<div class="mt-12 text-center">
<a class="inline-flex justify-center items-center gap-x-2 text-center bg-white border hover:border-gray-300 text-sm text-blue-600 hover:text-blue-700 font-medium hover:shadow-sm rounded-full focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white transition py-3 px-4 dark:bg-slate-900 dark:border-gray-700 dark:hover:border-gray-600 dark:text-blue-500 dark:hover:text-blue-400 dark:hover:shadow-slate-700/[.7] dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800" href="#">
Read more
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</a>
</div>
<!-- End Card -->
</div>
<!-- End Card Blog -->
Download Preline UI
Our code is available for you to download, inspect, and modify: