<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Educational Blog Post Grid Cards</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<div class="container mx-auto p-4">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img src="https://via.placeholder.com/480" alt="Discovering Ancient Ruins" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold mb-2"><a href="https://example.com/1" class="hover:underline">Discovering Ancient Ruins</a></h3>
<p class="text-gray-700 mb-4">Exploring ancient ruins gives insight into past civilizations and their cultures. Archaeological discoveries continue to fascinate historians and tourists alike.</p>
<div class="text-gray-600 text-sm">
<ul class="flex space-x-4">
<li><a href="https://example.com/1" class="hover:underline"><i class="fas fa-calendar-alt"></i> 10 Jul, 2023</a></li>
<li><a href="https://example.com/1" class="hover:underline"><i class="fas fa-user"></i> Explorer</a></li>
<li><a href="https://example.com/1" class="hover:underline"><i class="fas fa-comments"></i> 12</a></li>
</ul>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img src="https://via.placeholder.com/480" alt="Wildlife Photography Tips" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold mb-2"><a href="https://example.com/2" class="hover:underline">Wildlife Photography Tips</a></h3>
<p class="text-gray-700 mb-4">Capturing the beauty of wildlife requires patience and skill. Here are some tips to help you take stunning photos of animals in their natural habitats.</p>
<div class="text-gray-600 text-sm">
<ul class="flex space-x-4">
<li><a href="https://example.com/2" class="hover:underline"><i class="fas fa-calendar-alt"></i> 22 Jun, 2023</a></li>
<li><a href="https://example.com/2" class="hover:underline"><i class="fas fa-user"></i> Photographer</a></li>
<li><a href="https://example.com/2" class="hover:underline"><i class="fas fa-comments"></i> 25</a></li>
</ul>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img src="https://via.placeholder.com/480" alt="Gourmet Cooking at Home" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold mb-2"><a href="https://example.com/3" class="hover:underline">Gourmet Cooking at Home</a></h3>
<p class="text-gray-700 mb-4">Learn the secrets of gourmet cooking from top chefs. With the right ingredients and techniques, you can create restaurant-quality dishes in your own kitchen.</p>
<div class="text-gray-600 text-sm">
<ul class="flex space-x-4">
<li><a href="https://example.com/3" class="hover:underline"><i class="fas fa-calendar-alt"></i> 05 May, 2023</a></li>
<li><a href="https://example.com/3" class="hover:underline"><i class="fas fa-user"></i> Chef</a></li>
<li><a href="https://example.com/3" class="hover:underline"><i class="fas fa-comments"></i> 18</a></li>
</ul>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img src="https://via.placeholder.com/480" alt="DIY Home Renovation Projects" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold mb-2"><a href="https://example.com/4" class="hover:underline">DIY Home Renovation Projects</a></h3>
<p class="text-gray-700 mb-4">Transform your living space with these DIY home renovation projects. From painting to landscaping, these tips will help you create a beautiful and functional home.</p>
<div class="text-gray-600 text-sm">
<ul class="flex space-x-4">
<li><a href="https://example.com/4" class="hover:underline"><i class="fas fa-calendar-alt"></i> 15 Apr, 2023</a></li>
<li><a href="https://example.com/4" class="hover:underline"><i class="fas fa-user"></i> DIY Enthusiast</a></li>
<li><a href="https://example.com/4" class="hover:underline"><i class="fas fa-comments"></i> 22</a></li>
</ul>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img src="https://via.placeholder.com/480" alt="Traveling on a Budget" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold mb-2"><a href="https://example.com/5" class="hover:underline">Traveling on a Budget</a></h3>
<p class="text-gray-700 mb-4">Traveling the world doesn't have to be expensive. Discover budget-friendly travel tips that will help you see more for less.</p>
<div class="text-gray-600 text-sm">
<ul class="flex space-x-4">
<li><a href="https://example.com/5" class="hover:underline"><i class="fas fa-calendar-alt"></i> 20 Mar, 2023</a></li>
<li><a href="https://example.com/5" class="hover:underline"><i class="fas fa-user"></i> Traveler</a></li>
<li><a href="https://example.com/5" class="hover:underline"><i class="fas fa-comments"></i> 30</a></li>
</ul>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img src="https://via.placeholder.com/480" alt="Understanding Blockchain Technology" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold mb-2"><a href="https://example.com/6" class="hover:underline">Understanding Blockchain Technology</a></h3>
<p class="text-gray-700 mb-4">Blockchain technology is revolutionizing various industries. Learn about its basics, how it works, and its potential applications.</p>
<div class="text-gray-600 text-sm">
<ul class="flex space-x-4">
<li><a href="https://example.com/6" class="hover:underline"><i class="fas fa-calendar-alt"></i> 10 Feb, 2023</a></li>
<li><a href="https://example.com/6" class="hover:underline"><i class="fas fa-user"></i> Tech Enthusiast</a></li>
<li><a href="https://example.com/6" class="hover:underline"><i class="fas fa-comments"></i> 15</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<ul class="inline-flex space-x-2">
<li><a href="#!" class="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300">Prev</a></li>
<li><a href="#!" class="px-4 py-2 bg-blue-500 text-white rounded">1</a></li>
<li><a href="#!" class="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300">2</a></li>
<li><a href="#!" class="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300">3</a></li>
<li><a href="#!" class="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300">Next</a></li>
</ul>
</div>
</div>
</body>
</html>