Blog Sections
Ready to use Tailwind CSS blog section components with production-ready, copy-paste HTML code. Use them as they are, or as a starting point to build beautiful websites.
If you have a blog or content section, how you display it matters more than people think. A messy list of posts makes people bounce; a clean card grid invites them in. We have article card grids, featured post layouts with a big image up top, compact list-style indexes, and combined newsletter-and-recent-posts sections. They're all static HTML, wire them up to whatever CMS or back-end you use. The card slots are easy to loop over.
Tailwind
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Latest blog posts</h2>
<p class="mt-2 text-lg leading-8 text-gray-600">Stay informed with our latest articles and expert opinions.</p>
</div>
<div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:mx-0 lg:mt-20 lg:max-w-none lg:grid-cols-3">
<article class="flex flex-col items-start justify-between">
<a href="#" class="inline-block rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">Productivity</a>
<div class="mt-5 flex items-center gap-x-2 text-sm text-gray-500">
<time datetime="2024-08-17">August 17, 2024</time>
<span aria-hidden="true">•</span>
<p>7 mins read</p>
</div>
<div class="group relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
Maximizing Efficiency with Automation: A Beginner's Guide
</a>
</h3>
<p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-600">Learn how automation can transform your business operations, streamline workflows, and save valuable time in this comprehensive beginner's guide.</p>
</div>
<div class="relative mt-8 flex justify-start gap-x-2">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="text-sm">
<p class="font-semibold text-gray-900">
<a href="#">
<span class="absolute inset-0"></span>
Jane Doe
</a>
</p>
<p class="text-gray-600">Senior Product Manager</p>
</div>
</div>
</article>
<article class="flex flex-col items-start justify-between">
<a href="#" class="inline-block rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">Industry Insights</a>
<div class="mt-5 flex items-center gap-x-2 text-sm text-gray-500">
<time datetime="2024-08-10">August 10, 2024</time>
<span aria-hidden="true">•</span>
<p>6 mins read</p>
</div>
<div class="group relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
The Future of SaaS: Trends to Watch in 2024
</a>
</h3>
<p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-600">Explore the emerging trends in the SaaS industry that are set to shape the future, from AI integration to personalized user experiences.</p>
</div>
<div class="relative mt-8 flex justify-start gap-x-2">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="text-sm">
<p class="font-semibold text-gray-900">
<a href="#">
<span class="absolute inset-0"></span>
John Smith
</a>
</p>
<p class="text-gray-600">Head of Strategy</p>
</div>
</div>
</article>
<article class="flex flex-col items-start justify-between">
<a href="#" class="inline-block rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">Technology</a>
<div class="mt-5 flex items-center gap-x-2 text-sm text-gray-500">
<time datetime="2024-08-03">August 3, 2024</time>
<span aria-hidden="true">•</span>
<p>8 mins read</p>
</div>
<div class="group relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
Building a Scalable Architecture: Key Considerations
</a>
</h3>
<p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-600">Discover the critical elements of building a scalable software architecture that can grow with your business needs and handle increased demand effortlessly.</p>
</div>
<div class="relative mt-8 flex justify-start gap-x-2">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1492106087820-71f1a00d2b11?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="text-sm">
<p class="font-semibold text-gray-900">
<a href="#">
<span class="absolute inset-0"></span>
Emily Brown
</a>
</p>
<p class="text-gray-600">Chief Technology Officer (CTO)</p>
</div>
</div>
</article>
</div>
</div>
</div><div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Latest blog posts</h2>
<p class="mt-2 text-lg leading-8 text-gray-600">Stay informed with our latest articles and expert opinions.</p>
</div>
<div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:mx-0 lg:mt-20 lg:max-w-none lg:grid-cols-3">
<article class="flex flex-col items-start justify-between">
<div class="relative w-full overflow-clip rounded-2xl">
<img class="aspect-video w-full object-cover sm:aspect-[2/1] lg:aspect-[3/2]" src="https://images.unsplash.com/photo-1568992687947-868a62a9f521?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
<a href="#" class="absolute left-3 top-3 inline-block rounded-full bg-gray-100/90 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-100">Productivity</a>
</div>
<div class="mt-8 flex items-center gap-x-2 text-sm text-gray-500">
<time datetime="2024-08-17">August 17, 2024</time>
<span aria-hidden="true">•</span>
<p>7 mins read</p>
</div>
<div class="group relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
Maximizing Efficiency with Automation: A Beginner's Guide
</a>
</h3>
<p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-600">Learn how automation can transform your business operations, streamline workflows, and save valuable time in this comprehensive beginner's guide.</p>
</div>
<div class="relative mt-8 flex justify-start gap-x-2">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="text-sm">
<p class="font-semibold text-gray-900">
<a href="#">
<span class="absolute inset-0"></span>
Jane Doe
</a>
</p>
<p class="text-gray-600">Senior Product Manager</p>
</div>
</div>
</article>
<article class="flex flex-col items-start justify-between">
<div class="relative w-full overflow-clip rounded-2xl">
<img class="aspect-video w-full object-cover sm:aspect-[2/1] lg:aspect-[3/2]" src="https://images.unsplash.com/photo-1517048676732-d65bc937f952?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
<a href="#" class="absolute left-3 top-3 inline-block rounded-full bg-gray-100/90 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-100">Industry Insights</a>
</div>
<div class="mt-8 flex items-center gap-x-2 text-sm text-gray-500">
<time datetime="2024-08-10">August 10, 2024</time>
<span aria-hidden="true">•</span>
<p>6 mins read</p>
</div>
<div class="group relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
The Future of SaaS: Trends to Watch in 2024
</a>
</h3>
<p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-600">Explore the emerging trends in the SaaS industry that are set to shape the future, from AI integration to personalized user experiences.</p>
</div>
<div class="relative mt-8 flex justify-start gap-x-2">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="text-sm">
<p class="font-semibold text-gray-900">
<a href="#">
<span class="absolute inset-0"></span>
John Smith
</a>
</p>
<p class="text-gray-600">Head of Strategy</p>
</div>
</div>
</article>
<article class="flex flex-col items-start justify-between">
<div class="relative w-full overflow-clip rounded-2xl">
<img class="aspect-video w-full object-cover sm:aspect-[2/1] lg:aspect-[3/2]" src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
<a href="#" class="absolute left-3 top-3 inline-block rounded-full bg-gray-100/90 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-100">Technology</a>
</div>
<div class="mt-8 flex items-center gap-x-2 text-sm text-gray-500">
<time datetime="2024-08-03">August 3, 2024</time>
<span aria-hidden="true">•</span>
<p>8 mins read</p>
</div>
<div class="group relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
Building a Scalable Architecture: Key Considerations
</a>
</h3>
<p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-600">Discover the critical elements of building a scalable software architecture that can grow with your business needs and handle increased demand effortlessly.</p>
</div>
<div class="relative mt-8 flex justify-start gap-x-2">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1492106087820-71f1a00d2b11?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="text-sm">
<p class="font-semibold text-gray-900">
<a href="#">
<span class="absolute inset-0"></span>
Emily Brown
</a>
</p>
<p class="text-gray-600">Chief Technology Officer (CTO)</p>
</div>
</div>
</article>
</div>
</div>
</div><div class="bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-4xl font-semibold tracking-tight text-white sm:text-5xl">Latest blog posts</h2>
<p class="mt-2 text-lg leading-8 text-gray-300">Stay informed with our latest articles and expert opinions.</p>
</div>
<div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:mx-0 lg:mt-20 lg:max-w-none lg:grid-cols-3">
<article class="flex flex-col items-start justify-between">
<div class="relative w-full overflow-clip rounded-2xl">
<img class="aspect-video w-full object-cover sm:aspect-[2/1] lg:aspect-[3/2]" src="https://images.unsplash.com/photo-1568992687947-868a62a9f521?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-white/10"></div>
<a href="#" class="absolute left-3 top-3 inline-block rounded-full bg-gray-800/90 px-4 py-2 text-xs font-medium text-gray-300 hover:bg-gray-800">Productivity</a>
</div>
<div class="mt-8 flex items-center gap-x-2 text-sm text-gray-400">
<time datetime="2024-08-17">August 17, 2024</time>
<span aria-hidden="true">•</span>
<p>7 mins read</p>
</div>
<div class="group relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-white group-hover:text-gray-300">
<a href="#">
<span class="absolute inset-0"></span>
Maximizing Efficiency with Automation: A Beginner's Guide
</a>
</h3>
<p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-300">Learn how automation can transform your business operations, streamline workflows, and save valuable time in this comprehensive beginner's guide.</p>
</div>
<div class="relative mt-8 flex justify-start gap-x-2">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-white/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="text-sm">
<p class="font-semibold text-white">
<a href="#">
<span class="absolute inset-0"></span>
Jane Doe
</a>
</p>
<p class="text-gray-300">Senior Product Manager</p>
</div>
</div>
</article>
<article class="flex flex-col items-start justify-between">
<div class="relative w-full overflow-clip rounded-2xl">
<img class="aspect-video w-full object-cover sm:aspect-[2/1] lg:aspect-[3/2]" src="https://images.unsplash.com/photo-1517048676732-d65bc937f952?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-white/10"></div>
<a href="#" class="absolute left-3 top-3 inline-block rounded-full bg-gray-800/90 px-4 py-2 text-xs font-medium text-gray-300 hover:bg-gray-800">Industry Insights</a>
</div>
<div class="mt-8 flex items-center gap-x-2 text-sm text-gray-400">
<time datetime="2024-08-10">August 10, 2024</time>
<span aria-hidden="true">•</span>
<p>6 mins read</p>
</div>
<div class="group relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-white group-hover:text-gray-300">
<a href="#">
<span class="absolute inset-0"></span>
The Future of SaaS: Trends to Watch in 2024
</a>
</h3>
<p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-300">Explore the emerging trends in the SaaS industry that are set to shape the future, from AI integration to personalized user experiences.</p>
</div>
<div class="relative mt-8 flex justify-start gap-x-2">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-white/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="text-sm">
<p class="font-semibold text-white">
<a href="#">
<span class="absolute inset-0"></span>
John Smith
</a>
</p>
<p class="text-gray-300">Head of Strategy</p>
</div>
</div>
</article>
<article class="flex flex-col items-start justify-between">
<div class="relative w-full overflow-clip rounded-2xl">
<img class="aspect-video w-full object-cover sm:aspect-[2/1] lg:aspect-[3/2]" src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-white/10"></div>
<a href="#" class="absolute left-3 top-3 inline-block rounded-full bg-gray-800/90 px-4 py-2 text-xs font-medium text-gray-300 hover:bg-gray-800">Technology</a>
</div>
<div class="mt-8 flex items-center gap-x-2 text-sm text-gray-400">
<time datetime="2024-08-03">August 3, 2024</time>
<span aria-hidden="true">•</span>
<p>8 mins read</p>
</div>
<div class="group relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-white group-hover:text-gray-300">
<a href="#">
<span class="absolute inset-0"></span>
Building a Scalable Architecture: Key Considerations
</a>
</h3>
<p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-300">Discover the critical elements of building a scalable software architecture that can grow with your business needs and handle increased demand effortlessly.</p>
</div>
<div class="relative mt-8 flex justify-start gap-x-2">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-white/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1492106087820-71f1a00d2b11?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="text-sm">
<p class="font-semibold text-white">
<a href="#">
<span class="absolute inset-0"></span>
Emily Brown
</a>
</p>
<p class="text-gray-300">Chief Technology Officer (CTO)</p>
</div>
</div>
</article>
</div>
</div>
</div><div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Latest blog posts</h2>
<p class="mx-auto mt-2 max-w-xl text-lg leading-8 text-gray-600">Stay informed with our latest articles and expert opinions.</p>
</div>
<div class="mx-auto mt-16 max-w-2xl lg:mx-0 lg:mt-20 lg:max-w-none">
<article class="w-full lg:relative lg:isolate lg:aspect-[2/1] lg:overflow-clip lg:rounded-3xl lg:p-10">
<div class="relative aspect-video w-full overflow-clip rounded-2xl sm:aspect-[2/1] lg:static lg:aspect-auto lg:rounded-none">
<img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=60&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10 lg:rounded-3xl"></div>
<div aria-hidden="true" class="absolute inset-0 hidden bg-gradient-to-b from-gray-900/0 via-gray-900/40 to-gray-900 lg:block"></div>
</div>
<div class="mt-8 flex h-full w-full flex-col items-start justify-end lg:mt-0 lg:max-w-2xl">
<div class="z-50 flex items-start justify-end gap-x-2 text-sm text-gray-500 lg:text-gray-200">
<p><a href="#">Sarah Lee</a></p>
<span aria-hidden="true">•</span>
<time datetime="2024-08-17">August 17, 2024</time>
</div>
<div class="group relative mt-3">
<h3 class="text-2xl font-semibold text-gray-900 group-hover:text-gray-600 lg:text-white lg:group-hover:text-gray-200">
<a href="#">
<span class="absolute inset-0"></span>
Harnessing the Power of Data Analytics for Business Growth
</a>
</h3>
<p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-600 lg:max-w-xl lg:text-gray-300">Uncover how data-driven decision-making can accelerate your business growth by providing actionable insights and optimizing performance.</p>
</div>
<div class="z-10 mt-5 flex flex-wrap gap-x-2 gap-y-3 lg:mt-8">
<a href="#" class="rounded-full bg-gray-100/90 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-100">Data Science</a>
<a href="#" class="rounded-full bg-gray-100/90 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-100">Business Strategy</a>
<a href="#" class="rounded-full bg-gray-100/90 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-100">Analytics</a>
</div>
</div>
</article>
</div>
<div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<article class="flex flex-col items-start justify-between">
<div class="relative w-full overflow-clip rounded-2xl">
<img class="aspect-video w-full object-cover sm:aspect-[2/1] lg:aspect-[3/2]" src="https://images.unsplash.com/photo-1613324996029-f6190a17838f?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
<div class="mt-8 flex items-center gap-x-2 text-sm text-gray-500">
<p><a href="#">Alex Morgan</a></p>
<span aria-hidden="true">•</span>
<time datetime="2024-08-12">August 12, 2024</time>
</div>
<div class="group relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
The Role of UX Design in SaaS Success
</a>
</h3>
<p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-600">Explore the importance of user experience design in SaaS products and how it impacts user retention, satisfaction, and overall success.</p>
</div>
<div class="mt-5 flex flex-wrap gap-x-2 gap-y-3">
<a href="#" class="rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">UX</a>
<a href="#" class="rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">SaaS</a>
<a href="#" class="rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">Product Development</a>
</div>
</article>
<article class="flex flex-col items-start justify-between">
<div class="relative w-full overflow-clip rounded-2xl">
<img class="aspect-video w-full object-cover sm:aspect-[2/1] lg:aspect-[3/2]" src="https://images.unsplash.com/photo-1586227740560-8cf2732c1531?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
<div class="mt-8 flex items-center gap-x-2 text-sm text-gray-500">
<p><a href="#">Michael Turner</a></p>
<span aria-hidden="true">•</span>
<time datetime="2024-08-05">August 5, 2024</time>
</div>
<div class="group relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
Navigating the Challenges of Remote Work
</a>
</h3>
<p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-600">Learn strategies to overcome the common challenges of remote work, from maintaining productivity to fostering team collaboration in a digital environment.</p>
</div>
<div class="mt-5 flex flex-wrap gap-x-2 gap-y-3">
<a href="#" class="rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">Remote Work</a>
<a href="#" class="rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">Productivity</a>
</div>
</article>
<article class="flex flex-col items-start justify-between">
<div class="relative w-full overflow-clip rounded-2xl">
<img class="aspect-video w-full object-cover sm:aspect-[2/1] lg:aspect-[3/2]" src="https://images.unsplash.com/photo-1557426272-fc759fdf7a8d?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
<div class="mt-8 flex items-center gap-x-2 text-sm text-gray-500">
<p><a href="#">Laura Bennett</a></p>
<span aria-hidden="true">•</span>
<time datetime="2024-08-01">August 1, 2024</time>
</div>
<div class="group relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
Implementing AI in Your SaaS Platform: Best Practices
</a>
</h3>
<p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-600">Discover how to effectively integrate AI into your SaaS platform, including best practices and key considerations for a seamless implementation.</p>
</div>
<div class="mt-5 flex flex-wrap gap-x-2 gap-y-3">
<a href="#" class="rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">AI</a>
<a href="#" class="rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">SaaS</a>
<a href="#" class="rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">Technology</a>
</div>
</article>
</div>
</div>
</div><div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Latest blog posts</h2>
<p class="mx-auto mt-2 max-w-xl text-lg leading-8 text-gray-600">Stay informed with our latest articles and expert opinions.</p>
</div>
<div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:mt-20 lg:max-w-4xl lg:grid-cols-2">
<article class="flex flex-col items-start justify-between">
<div class="relative w-full overflow-clip rounded-2xl">
<img class="aspect-video w-full object-cover sm:aspect-[2/1] lg:aspect-[3/2]" src="https://images.unsplash.com/photo-1568992687947-868a62a9f521?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
<a href="#" class="absolute left-3 top-3 inline-block rounded-full bg-gray-100/90 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-100">Productivity</a>
</div>
<div class="mt-8 flex items-center gap-x-2 text-sm text-gray-500">
<time datetime="2024-08-17">August 17, 2024</time>
<span aria-hidden="true">•</span>
<p>7 mins read</p>
</div>
<div class="group relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
Maximizing Efficiency with Automation: A Beginner's Guide
</a>
</h3>
<p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-600">Learn how automation can transform your business operations, streamline workflows, and save valuable time in this comprehensive beginner's guide.</p>
</div>
<div class="relative mt-8 flex justify-start gap-x-2">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="text-sm">
<p class="font-semibold text-gray-900">
<a href="#">
<span class="absolute inset-0"></span>
Jane Doe
</a>
</p>
<p class="text-gray-600">Senior Product Manager</p>
</div>
</div>
</article>
<article class="flex flex-col items-start justify-between">
<div class="relative w-full overflow-clip rounded-2xl">
<img class="aspect-video w-full object-cover sm:aspect-[2/1] lg:aspect-[3/2]" src="https://images.unsplash.com/photo-1517048676732-d65bc937f952?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
<a href="#" class="absolute left-3 top-3 inline-block rounded-full bg-gray-100/90 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-100">Industry Insights</a>
</div>
<div class="mt-8 flex items-center gap-x-2 text-sm text-gray-500">
<time datetime="2024-08-10">August 10, 2024</time>
<span aria-hidden="true">•</span>
<p>6 mins read</p>
</div>
<div class="group relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
The Future of SaaS: Trends to Watch in 2024
</a>
</h3>
<p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-600">Explore the emerging trends in the SaaS industry that are set to shape the future, from AI integration to personalized user experiences.</p>
</div>
<div class="relative mt-8 flex justify-start gap-x-2">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="text-sm">
<p class="font-semibold text-gray-900">
<a href="#">
<span class="absolute inset-0"></span>
John Smith
</a>
</p>
<p class="text-gray-600">Head of Strategy</p>
</div>
</div>
</article>
</div>
</div>
</div><div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Latest blog posts</h2>
<p class="mx-auto mt-2 max-w-xl text-lg leading-8 text-gray-600">Stay informed with our latest articles and expert opinions.</p>
</div>
<div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-16 gap-y-12 lg:mx-0 lg:mt-20 lg:max-w-none lg:grid-cols-2">
<article class="">
<div class="relative w-full overflow-clip rounded-2xl">
<img class="aspect-video w-full object-cover sm:aspect-[2/1] lg:aspect-[3/2]" src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=60&w=1200&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
<div class="mt-8 flex items-center gap-x-2 text-sm text-gray-500">
<p><a href="#">Rachel Adams</a></p>
<span aria-hidden="true">•</span>
<time datetime="2024-08-17">August 17, 2024</time>
</div>
<div class="group relative mt-3">
<h3 class="max-w-xl text-2xl font-semibold text-gray-900 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
Leveraging Big Data Analytics: Strategies to Drive Business Innovation
</a>
</h3>
<p class="mt-5 line-clamp-2 max-w-lg text-sm leading-6 text-gray-600">Explore how big data analytics can be a game-changer for businesses, driving innovation, improving decision-making, and gaining a competitive edge in the market.</p>
</div>
<div class="mt-5 flex flex-wrap gap-x-2 gap-y-3">
<a href="#" class="rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">Data Science</a>
<a href="#" class="rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">Business Innovation</a>
<a href="#" class="rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">Competitive Strategy</a>
</div>
</article>
<div class="divide-y divide-gray-900/10 border-t border-gray-900/10 lg:-my-8 lg:border-t-0">
<article class="py-12 md:flex md:items-start md:gap-x-6 lg:py-8">
<div class="relative w-full flex-none overflow-clip rounded-2xl md:w-1/3">
<img class="aspect-video w-full object-cover sm:aspect-[2/1] md:aspect-[5/4]" src="https://images.unsplash.com/photo-1646617747609-45b466ace9a6?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
<div class="mt-8 md:mt-0">
<div class="flex items-center gap-x-2 text-sm text-gray-500">
<p><a href="#">David Clarke</a></p>
<span aria-hidden="true">•</span>
<time datetime="2024-08-12">August 12, 2024</time>
</div>
<div class="relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-gray-900 hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
The Intersection of UX Design and SaaS Development: Enhancing User Experience for Greater Product Success
</a>
</h3>
</div>
<div class="mt-5 flex flex-wrap gap-x-2 gap-y-3">
<a href="#" class="rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">UX Design</a>
<a href="#" class="rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">SaaS</a>
</div>
</div>
</article>
<article class="py-12 md:flex md:items-start md:gap-x-6 lg:py-8">
<div class="relative w-full flex-none overflow-clip rounded-2xl md:w-1/3">
<img class="aspect-video w-full object-cover sm:aspect-[2/1] md:aspect-[5/4]" src="https://images.unsplash.com/photo-1587578932405-7c740a762f7f?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
<div class="mt-8 md:mt-0">
<div class="flex items-center gap-x-2 text-sm text-gray-500">
<p><a href="#">Lisa Johnson</a></p>
<span aria-hidden="true">•</span>
<time datetime="2024-08-07">August 7, 2024</time>
</div>
<div class="relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-gray-900 hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
Remote Work Revolution: Effective Strategies for Managing Distributed Teams and Maintaining Productivity
</a>
</h3>
</div>
<div class="mt-5 flex flex-wrap gap-x-2 gap-y-3">
<a href="#" class="rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">Remote Work</a>
<a href="#" class="rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">Productivity</a>
</div>
</div>
</article>
<article class="py-12 md:flex md:items-start md:gap-x-6 lg:py-8">
<div class="relative w-full flex-none overflow-clip rounded-2xl md:w-1/3">
<img class="aspect-video w-full object-cover sm:aspect-[2/1] md:aspect-[5/4]" src="https://images.unsplash.com/photo-1557804506-669a67965ba0?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
<div class="mt-8 md:mt-0">
<div class="flex items-center gap-x-2 text-sm text-gray-500">
<p><a href="#">Mark Taylor</a></p>
<span aria-hidden="true">•</span>
<time datetime="2024-08-01">August 1, 2024</time>
</div>
<div class="relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-gray-900 hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
Best Practices for Integrating Artificial Intelligence into Your SaaS Platform: A Comprehensive Guide
</a>
</h3>
</div>
<div class="mt-5 flex flex-wrap gap-x-2 gap-y-3">
<a href="#" class="rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">AI</a>
<a href="#" class="rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">SaaS</a>
<a href="#" class="rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">Technology</a>
</div>
</div>
</article>
</div>
</div>
</div>
</div><div class="bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-4xl font-semibold tracking-tight text-white sm:text-5xl">Latest blog posts</h2>
<p class="mx-auto mt-2 max-w-xl text-lg leading-8 text-gray-300">Stay informed with our latest articles and expert opinions.</p>
</div>
<div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-16 gap-y-12 lg:mx-0 lg:mt-20 lg:max-w-none lg:grid-cols-2">
<article class="">
<div class="relative w-full overflow-clip rounded-2xl">
<img class="aspect-video w-full object-cover sm:aspect-[2/1] lg:aspect-[3/2]" src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=60&w=1200&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-white/10"></div>
</div>
<div class="mt-8 flex items-center gap-x-2 text-sm text-gray-400">
<p><a href="#">Rachel Adams</a></p>
<span aria-hidden="true">•</span>
<time datetime="2024-08-17">August 17, 2024</time>
</div>
<div class="group relative mt-3">
<h3 class="max-w-xl text-2xl font-semibold text-white group-hover:text-gray-300">
<a href="#">
<span class="absolute inset-0"></span>
Leveraging Big Data Analytics: Strategies to Drive Business Innovation
</a>
</h3>
<p class="mt-5 line-clamp-2 max-w-lg text-sm leading-6 text-gray-300">Explore how big data analytics can be a game-changer for businesses, driving innovation, improving decision-making, and gaining a competitive edge in the market.</p>
</div>
<div class="mt-5 flex flex-wrap gap-x-2 gap-y-3">
<a href="#" class="rounded-full bg-gray-800 px-4 py-2 text-xs font-medium text-gray-300 hover:bg-gray-700">Data Science</a>
<a href="#" class="rounded-full bg-gray-800 px-4 py-2 text-xs font-medium text-gray-300 hover:bg-gray-700">Business Innovation</a>
<a href="#" class="rounded-full bg-gray-800 px-4 py-2 text-xs font-medium text-gray-300 hover:bg-gray-700">Competitive Strategy</a>
</div>
</article>
<div class="divide-y divide-white/10 border-t border-white/10 lg:-my-8 lg:border-t-0">
<article class="py-12 md:flex md:items-start md:gap-x-6 lg:py-8">
<div class="relative w-full flex-none overflow-clip rounded-2xl md:w-1/3">
<img class="aspect-video w-full object-cover sm:aspect-[2/1] md:aspect-[5/4]" src="https://images.unsplash.com/photo-1646617747609-45b466ace9a6?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-white/10"></div>
</div>
<div class="mt-8 md:mt-0">
<div class="flex items-center gap-x-2 text-sm text-gray-400">
<p><a href="#">David Clarke</a></p>
<span aria-hidden="true">•</span>
<time datetime="2024-08-12">August 12, 2024</time>
</div>
<div class="relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-white hover:text-gray-300">
<a href="#">
<span class="absolute inset-0"></span>
The Intersection of UX Design and SaaS Development: Enhancing User Experience for Greater Product Success
</a>
</h3>
</div>
<div class="mt-5 flex flex-wrap gap-x-2 gap-y-3">
<a href="#" class="rounded-full bg-gray-800 px-4 py-2 text-xs font-medium text-gray-300 hover:bg-gray-700">UX Design</a>
<a href="#" class="rounded-full bg-gray-800 px-4 py-2 text-xs font-medium text-gray-300 hover:bg-gray-700">SaaS</a>
</div>
</div>
</article>
<article class="py-12 md:flex md:items-start md:gap-x-6 lg:py-8">
<div class="relative w-full flex-none overflow-clip rounded-2xl md:w-1/3">
<img class="aspect-video w-full object-cover sm:aspect-[2/1] md:aspect-[5/4]" src="https://images.unsplash.com/photo-1587578932405-7c740a762f7f?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-white/10"></div>
</div>
<div class="mt-8 md:mt-0">
<div class="flex items-center gap-x-2 text-sm text-gray-400">
<p><a href="#">Lisa Johnson</a></p>
<span aria-hidden="true">•</span>
<time datetime="2024-08-07">August 7, 2024</time>
</div>
<div class="relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-white hover:text-gray-300">
<a href="#">
<span class="absolute inset-0"></span>
Remote Work Revolution: Effective Strategies for Managing Distributed Teams and Maintaining Productivity
</a>
</h3>
</div>
<div class="mt-5 flex flex-wrap gap-x-2 gap-y-3">
<a href="#" class="rounded-full bg-gray-800 px-4 py-2 text-xs font-medium text-gray-300 hover:bg-gray-700">Remote Work</a>
<a href="#" class="rounded-full bg-gray-800 px-4 py-2 text-xs font-medium text-gray-300 hover:bg-gray-700">Productivity</a>
</div>
</div>
</article>
<article class="py-12 md:flex md:items-start md:gap-x-6 lg:py-8">
<div class="relative w-full flex-none overflow-clip rounded-2xl md:w-1/3">
<img class="aspect-video w-full object-cover sm:aspect-[2/1] md:aspect-[5/4]" src="https://images.unsplash.com/photo-1557804506-669a67965ba0?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-white/10"></div>
</div>
<div class="mt-8 md:mt-0">
<div class="flex items-center gap-x-2 text-sm text-gray-400">
<p><a href="#">Mark Taylor</a></p>
<span aria-hidden="true">•</span>
<time datetime="2024-08-01">August 1, 2024</time>
</div>
<div class="relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-white hover:text-gray-300">
<a href="#">
<span class="absolute inset-0"></span>
Best Practices for Integrating Artificial Intelligence into Your SaaS Platform: A Comprehensive Guide
</a>
</h3>
</div>
<div class="mt-5 flex flex-wrap gap-x-2 gap-y-3">
<a href="#" class="rounded-full bg-gray-800 px-4 py-2 text-xs font-medium text-gray-300 hover:bg-gray-700">AI</a>
<a href="#" class="rounded-full bg-gray-800 px-4 py-2 text-xs font-medium text-gray-300 hover:bg-gray-700">SaaS</a>
<a href="#" class="rounded-full bg-gray-800 px-4 py-2 text-xs font-medium text-gray-300 hover:bg-gray-700">Technology</a>
</div>
</div>
</article>
</div>
</div>
</div>
</div><div class="bg-gray-50 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Latest blog posts</h2>
<p class="mx-auto mt-2 max-w-xl text-lg leading-8 text-gray-600">Stay informed with our latest articles and expert opinions.</p>
</div>
<div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-12 lg:mx-0 lg:mt-20 lg:max-w-none lg:grid-cols-3">
<article class="flex flex-col overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-gray-900/10">
<img class="aspect-[3/2] w-full object-cover sm:aspect-[2/1] lg:aspect-[3/2]" src="https://images.unsplash.com/photo-1568992687947-868a62a9f521?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div class="flex flex-auto flex-col items-start justify-between p-3.5 sm:p-5">
<div class="text-sm text-gray-500">
<time datetime="2024-08-17">August 17, 2024</time>
</div>
<div class="relative mt-2">
<h3 class="text-lg font-semibold leading-6 text-gray-900 hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
Maximizing Efficiency with Automation: A Beginner's Guide
</a>
</h3>
</div>
<div class="relative mt-5 flex justify-start gap-x-2">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="text-sm">
<p class="font-semibold text-gray-900">
<a href="#">
<span class="absolute inset-0"></span>
Jane Doe
</a>
</p>
<p class="text-gray-600">Senior Product Manager</p>
</div>
</div>
</div>
</article>
<article class="flex flex-col overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-gray-900/10">
<img class="aspect-[3/2] w-full object-cover sm:aspect-[2/1] lg:aspect-[3/2]" src="https://images.unsplash.com/photo-1517048676732-d65bc937f952?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div class="flex flex-auto flex-col items-start justify-between p-3.5 sm:p-5">
<div class="text-sm text-gray-500">
<time datetime="2024-08-10">August 10, 2024</time>
</div>
<div class="relative mt-2">
<h3 class="text-lg font-semibold leading-6 text-gray-900 hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
The Future of SaaS: Trends to Watch in 2024
</a>
</h3>
</div>
<div class="relative mt-5 flex justify-start gap-x-2">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="text-sm">
<p class="font-semibold text-gray-900">
<a href="#">
<span class="absolute inset-0"></span>
John Smith
</a>
</p>
<p class="text-gray-600">Head of Strategy</p>
</div>
</div>
</div>
</article>
<article class="flex flex-col overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-gray-900/10">
<img class="aspect-[3/2] w-full object-cover sm:aspect-[2/1] lg:aspect-[3/2]" src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div class="flex flex-auto flex-col items-start justify-between p-3.5 sm:p-5">
<div class="text-sm text-gray-500">
<time datetime="2024-08-03">August 3, 2024</time>
</div>
<div class="relative mt-2">
<h3 class="text-lg font-semibold leading-6 text-gray-900 hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
Building a Scalable Architecture: Key Considerations
</a>
</h3>
</div>
<div class="relative mt-5 flex justify-start gap-x-2">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1492106087820-71f1a00d2b11?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="text-sm">
<p class="font-semibold text-gray-900">
<a href="#">
<span class="absolute inset-0"></span>
Emily Brown
</a>
</p>
<p class="text-gray-600">Chief Technology Officer (CTO)</p>
</div>
</div>
</div>
</article>
</div>
</div>
</div><div class="bg-white py-24 sm:py-32">
<div class="px-6 lg:px-8">
<div class="mx-auto max-w-2xl">
<h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Latest blog posts</h2>
<p class="mt-2 text-lg leading-8 text-gray-600">Stay informed with our latest articles and expert opinions.</p>
<div class="mt-16 lg:mt-20">
<div class="-my-12 divide-y divide-gray-900/10">
<article class="py-12">
<a href="#" class="inline-block rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">Productivity</a>
<div class="mt-5 flex items-center gap-x-2 text-sm text-gray-500">
<time datetime="2024-08-17">August 17, 2024</time>
<span aria-hidden="true">•</span>
<p>7 mins read</p>
</div>
<div class="group relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
Maximizing Efficiency with Automation: A Beginner's Guide
</a>
</h3>
<p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-600">Learn how automation can transform your business operations, streamline workflows, and save valuable time in this comprehensive beginner's guide.</p>
</div>
<div class="relative mt-8 flex justify-start gap-x-2">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="text-sm">
<p class="font-semibold text-gray-900">
<a href="#">
<span class="absolute inset-0"></span>
Jane Doe
</a>
</p>
<p class="text-gray-600">Senior Product Manager</p>
</div>
</div>
</article>
<article class="py-12">
<a href="#" class="inline-block rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">Industry Insights</a>
<div class="mt-5 flex items-center gap-x-2 text-sm text-gray-500">
<time datetime="2024-08-10">August 10, 2024</time>
<span aria-hidden="true">•</span>
<p>6 mins read</p>
</div>
<div class="group relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
The Future of SaaS: Trends to Watch in 2024
</a>
</h3>
<p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-600">Explore the emerging trends in the SaaS industry that are set to shape the future, from AI integration to personalized user experiences.</p>
</div>
<div class="relative mt-8 flex justify-start gap-x-2">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="text-sm">
<p class="font-semibold text-gray-900">
<a href="#">
<span class="absolute inset-0"></span>
John Smith
</a>
</p>
<p class="text-gray-600">Head of Strategy</p>
</div>
</div>
</article>
<article class="py-12">
<a href="#" class="inline-block rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">Technology</a>
<div class="mt-5 flex items-center gap-x-2 text-sm text-gray-500">
<time datetime="2024-08-03">August 3, 2024</time>
<span aria-hidden="true">•</span>
<p>8 mins read</p>
</div>
<div class="group relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
Building a Scalable Architecture: Key Considerations
</a>
</h3>
<p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-600">Discover the critical elements of building a scalable software architecture that can grow with your business needs and handle increased demand effortlessly.</p>
</div>
<div class="relative mt-8 flex justify-start gap-x-2">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1492106087820-71f1a00d2b11?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="text-sm">
<p class="font-semibold text-gray-900">
<a href="#">
<span class="absolute inset-0"></span>
Emily Brown
</a>
</p>
<p class="text-gray-600">Chief Technology Officer (CTO)</p>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</div><div class="bg-white py-24 sm:py-32">
<div class="px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-4xl">
<h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Latest blog posts</h2>
<p class="mt-2 text-lg leading-8 text-gray-600">Stay informed with our latest articles and expert opinions.</p>
<div class="mt-16 lg:mt-20">
<div class="-my-12 divide-y divide-gray-900/10">
<article class="flex flex-col gap-8 py-12 lg:flex-row lg:items-start">
<div class="relative w-full flex-none overflow-clip rounded-2xl lg:w-64">
<img class="aspect-video w-full object-cover sm:aspect-[2/1] lg:aspect-square" src="https://images.unsplash.com/photo-1568992687947-868a62a9f521?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
<a href="#" class="absolute left-3 top-3 inline-block rounded-full bg-gray-100/90 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-100">Productivity</a>
</div>
<div class="flex flex-col items-start">
<div class="flex items-center gap-x-2 text-sm text-gray-500">
<time datetime="2024-08-17">August 17, 2024</time>
<span aria-hidden="true">•</span>
<p>7 mins read</p>
</div>
<div class="group relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
Maximizing Efficiency with Automation: A Beginner's Guide
</a>
</h3>
<p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-600">Learn how automation can transform your business operations, streamline workflows, and save valuable time in this comprehensive beginner's guide.</p>
</div>
<div class="relative mt-8 flex justify-start gap-x-2">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="text-sm">
<p class="font-semibold text-gray-900">
<a href="#">
<span class="absolute inset-0"></span>
Jane Doe
</a>
</p>
<p class="text-gray-600">Senior Product Manager</p>
</div>
</div>
</div>
</article>
<article class="flex flex-col gap-8 py-12 lg:flex-row lg:items-start">
<div class="relative w-full flex-none overflow-clip rounded-2xl lg:w-64">
<img class="aspect-video w-full object-cover sm:aspect-[2/1] lg:aspect-square" src="https://images.unsplash.com/photo-1517048676732-d65bc937f952?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
<a href="#" class="absolute left-3 top-3 inline-block rounded-full bg-gray-100/90 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-100">Industry Insights</a>
</div>
<div class="flex flex-col items-start">
<div class="flex items-center gap-x-2 text-sm text-gray-500">
<time datetime="2024-08-10">August 10, 2024</time>
<span aria-hidden="true">•</span>
<p>6 mins read</p>
</div>
<div class="group relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
The Future of SaaS: Trends to Watch in 2024
</a>
</h3>
<p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-600">Explore the emerging trends in the SaaS industry that are set to shape the future, from AI integration to personalized user experiences.</p>
</div>
<div class="relative mt-8 flex justify-start gap-x-2">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="text-sm">
<p class="font-semibold text-gray-900">
<a href="#">
<span class="absolute inset-0"></span>
John Smith
</a>
</p>
<p class="text-gray-600">Head of Strategy</p>
</div>
</div>
</div>
</article>
<article class="flex flex-col gap-8 py-12 lg:flex-row lg:items-start">
<div class="relative w-full flex-none overflow-clip rounded-2xl lg:w-64">
<img class="aspect-video w-full object-cover sm:aspect-[2/1] lg:aspect-square" src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
<a href="#" class="absolute left-3 top-3 inline-block rounded-full bg-gray-100/90 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-100">Technology</a>
</div>
<div class="flex flex-col items-start">
<div class="flex items-center gap-x-2 text-sm text-gray-500">
<time datetime="2024-08-03">August 3, 2024</time>
<span aria-hidden="true">•</span>
<p>8 mins read</p>
</div>
<div class="group relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
<a href="#">
<span class="absolute inset-0"></span>
Building a Scalable Architecture: Key Considerations
</a>
</h3>
<p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-600">Discover the critical elements of building a scalable software architecture that can grow with your business needs and handle increased demand effortlessly.</p>
</div>
<div class="relative mt-8 flex justify-start gap-x-2">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1492106087820-71f1a00d2b11?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="text-sm">
<p class="font-semibold text-gray-900">
<a href="#">
<span class="absolute inset-0"></span>
Emily Brown
</a>
</p>
<p class="text-gray-600">Chief Technology Officer (CTO)</p>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</div><div class="bg-gray-900 py-24 sm:py-32">
<div class="px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-4xl">
<h2 class="text-4xl font-semibold tracking-tight text-white sm:text-5xl">Latest blog posts</h2>
<p class="mt-2 text-lg leading-8 text-gray-300">Stay informed with our latest articles and expert opinions.</p>
<div class="mt-16 lg:mt-20">
<div class="-my-12 divide-y divide-white/10">
<article class="flex flex-col gap-8 py-12 lg:flex-row lg:items-start">
<div class="relative w-full flex-none overflow-clip rounded-2xl lg:w-64">
<img class="aspect-video w-full object-cover sm:aspect-[2/1] lg:aspect-square" src="https://images.unsplash.com/photo-1568992687947-868a62a9f521?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-white/10"></div>
<a href="#" class="absolute left-3 top-3 inline-block rounded-full bg-gray-800/90 px-4 py-2 text-xs font-medium text-gray-300 hover:bg-gray-800">Productivity</a>
</div>
<div class="flex flex-col items-start">
<div class="flex items-center gap-x-2 text-sm text-gray-400">
<time datetime="2024-08-17">August 17, 2024</time>
<span aria-hidden="true">•</span>
<p>7 mins read</p>
</div>
<div class="group relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-white group-hover:text-gray-300">
<a href="#">
<span class="absolute inset-0"></span>
Maximizing Efficiency with Automation: A Beginner's Guide
</a>
</h3>
<p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-300">Learn how automation can transform your business operations, streamline workflows, and save valuable time in this comprehensive beginner's guide.</p>
</div>
<div class="relative mt-8 flex justify-start gap-x-2">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-white/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="text-sm">
<p class="font-semibold text-white">
<a href="#">
<span class="absolute inset-0"></span>
Jane Doe
</a>
</p>
<p class="text-gray-300">Senior Product Manager</p>
</div>
</div>
</div>
</article>
<article class="flex flex-col gap-8 py-12 lg:flex-row lg:items-start">
<div class="relative w-full flex-none overflow-clip rounded-2xl lg:w-64">
<img class="aspect-video w-full object-cover sm:aspect-[2/1] lg:aspect-square" src="https://images.unsplash.com/photo-1517048676732-d65bc937f952?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-white/10"></div>
<a href="#" class="absolute left-3 top-3 inline-block rounded-full bg-gray-800/90 px-4 py-2 text-xs font-medium text-gray-300 hover:bg-gray-800">Industry Insights</a>
</div>
<div class="flex flex-col items-start">
<div class="flex items-center gap-x-2 text-sm text-gray-400">
<time datetime="2024-08-10">August 10, 2024</time>
<span aria-hidden="true">•</span>
<p>6 mins read</p>
</div>
<div class="group relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-white group-hover:text-gray-300">
<a href="#">
<span class="absolute inset-0"></span>
The Future of SaaS: Trends to Watch in 2024
</a>
</h3>
<p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-300">Explore the emerging trends in the SaaS industry that are set to shape the future, from AI integration to personalized user experiences.</p>
</div>
<div class="relative mt-8 flex justify-start gap-x-2">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-white/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="text-sm">
<p class="font-semibold text-white">
<a href="#">
<span class="absolute inset-0"></span>
John Smith
</a>
</p>
<p class="text-gray-300">Head of Strategy</p>
</div>
</div>
</div>
</article>
<article class="flex flex-col gap-8 py-12 lg:flex-row lg:items-start">
<div class="relative w-full flex-none overflow-clip rounded-2xl lg:w-64">
<img class="aspect-video w-full object-cover sm:aspect-[2/1] lg:aspect-square" src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div aria-hidden="true" class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-white/10"></div>
<a href="#" class="absolute left-3 top-3 inline-block rounded-full bg-gray-800/90 px-4 py-2 text-xs font-medium text-gray-300 hover:bg-gray-800">Technology</a>
</div>
<div class="flex flex-col items-start">
<div class="flex items-center gap-x-2 text-sm text-gray-400">
<time datetime="2024-08-03">August 3, 2024</time>
<span aria-hidden="true">•</span>
<p>8 mins read</p>
</div>
<div class="group relative mt-3">
<h3 class="text-lg font-semibold leading-6 text-white group-hover:text-gray-300">
<a href="#">
<span class="absolute inset-0"></span>
Building a Scalable Architecture: Key Considerations
</a>
</h3>
<p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-300">Discover the critical elements of building a scalable software architecture that can grow with your business needs and handle increased demand effortlessly.</p>
</div>
<div class="relative mt-8 flex justify-start gap-x-2">
<div class="flex-none">
<span class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-white/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1492106087820-71f1a00d2b11?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="text-sm">
<p class="font-semibold text-white">
<a href="#">
<span class="absolute inset-0"></span>
Emily Brown
</a>
</p>
<p class="text-gray-300">Chief Technology Officer (CTO)</p>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</div>Frequently asked questions
-
Multi-column article card grids, featured post with large hero image, horizontal list-style index, and a combined newsletter-plus-recent-articles layout.
-
No. It's just HTML, you can connect it to anything. A Laravel loop, a static site generator, a headless CMS, or even hardcoded content. The structure is the same either way.
-
Replace the img src attributes with your actual image paths. The aspect-ratio and object-cover classes keep them consistently cropped across cards.
-
Yes. Three-column grids go to two on tablet and one on mobile.
Related Tailwind CSS components
More free, copy-paste Tailwind CSS components to use in your projects.