Blog Grid Section Component
A responsive, three-column grid for blog posts, featuring animated cards with hover effects for the image and a 'Read More' call-to-action.
LTR
RTL
<section class="py-20 bg-white dark:bg-gray-900" x-data="{ inView: false }" x-init="setTimeout(() => inView = true, 500)">
<div class="mx-auto px-4 sm:px-6 lg:px-8">
<div class="mb-16 text-center">
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out">
<h2 class="mb-4 text-4xl font-bold text-gray-900 sm:text-5xl dark:text-white">
Our Blog
</h2>
<p class="mx-auto text-xl text-gray-600 dark:text-gray-300">
Stay updated with the latest industry insights, tips, and trends from our expert team.
</p>
</div>
</div>
<div class="grid gap-8 mb-20 md:grid-cols-2 lg:grid-cols-3">
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out delay-200">
<div class="group overflow-hidden transition-all duration-300 flex-col flex h-full rounded-2xl bg-gray-50 shadow-lg dark:bg-gray-800">
<div class="relative">
<img src="https://images.pexels.com/photos/1181244/pexels-photo-1181244.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Blog Post 1" class="object-cover group-hover:scale-105 transition-transform duration-300 w-full h-[256px]" />
<div class="absolute inset-0 bg-black/60 group-hover:bg-opacity-40 transition-all duration-300 items-center justify-center opacity-0 group-hover:opacity-100 flex bg-opacity-0">
<a href="#" class="transition-colors duration-200 px-4 py-2 rounded-lg bg-blue-600 font-semibold text-white">Read More</a>
</div>
</div>
<div class="flex-col flex-grow flex p-6">
<h3 class="mb-2 text-xl font-bold text-gray-900 dark:text-white">
The Future of Web Development
</h3>
<p class="flex-grow text-gray-600 dark:text-gray-300">
Explore emerging trends in web development, from progressive web apps to AI-driven interfaces, and how they can transform your business.
</p>
</div>
</div>
</div>
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out delay-400">
<div class="group overflow-hidden transition-all duration-300 flex-col flex h-full rounded-2xl bg-gray-50 shadow-lg dark:bg-gray-800">
<div class="relative">
<img src="https://images.pexels.com/photos/1181244/pexels-photo-1181244.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Blog Post 2" class="object-cover group-hover:scale-105 transition-transform duration-300 w-full h-[256px]" />
<div class="absolute inset-0 bg-black/60 group-hover:bg-opacity-40 transition-all duration-300 items-center justify-center opacity-0 group-hover:opacity-100 flex bg-opacity-0">
<a href="#" class="transition-colors duration-200 px-4 py-2 rounded-lg bg-blue-600 font-semibold text-white">Read More</a>
</div>
</div>
<div class="flex-col flex-grow flex p-6">
<h3 class="mb-2 text-xl font-bold text-gray-900 dark:text-white">
Maximizing ROI with Digital Marketing
</h3>
<p class="flex-grow text-gray-600 dark:text-gray-300">
Learn proven strategies for boosting your online presence and driving measurable results through SEO, social media, and content marketing.
</p>
</div>
</div>
</div>
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out delay-600">
<div class="group overflow-hidden transition-all duration-300 flex-col flex h-full rounded-2xl bg-gray-50 shadow-lg dark:bg-gray-800">
<div class="relative">
<img src="https://images.pexels.com/photos/1181244/pexels-photo-1181244.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Blog Post 3" class="object-cover group-hover:scale-105 transition-transform duration-300 w-full h-[256px]" />
<div class="absolute inset-0 bg-black/60 group-hover:bg-opacity-40 transition-all duration-300 items-center justify-center opacity-0 group-hover:opacity-100 flex bg-opacity-0">
<a href="#" class="transition-colors duration-200 px-4 py-2 rounded-lg bg-blue-600 font-semibold text-white">Read More</a>
</div>
</div>
<div class="flex-col flex-grow flex p-6">
<h3 class="mb-2 text-xl font-bold text-gray-900 dark:text-white">
Scaling with Cloud Solutions
</h3>
<p class="flex-grow text-gray-600 dark:text-gray-300">
Discover how cloud infrastructure can enhance scalability and security for your business with real-world examples and best practices.
</p>
</div>
</div>
</div>
</div>
<div class="text-center">
<a href="#" class="transition-all duration-200 inline-block px-8 py-4 rounded-lg bg-blue-600 font-semibold text-white shadow-lg">View All Posts</a>
</div>
</div>
</section>