Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS Blog Post Card</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex items-center justify-center min-h-screen p-6 antialiased"> <div class="w-full max-w-md bg-white rounded-[2rem] shadow-3xl overflow-hidden border border-slate-100 flex flex-col md:flex-row"> <div class="w-full md:w-2/5 h-48 md:h-auto overflow-hidden"> <img src="https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=600" alt="Blog Post" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-700"> </div> <div class="w-full md:w-3/5 p-8 flex flex-col justify-between"> <div> <div class="flex gap-4 mb-4"> <span class="text-[8px] font-black text-indigo-600 uppercase tracking-[0.2em]">Engineering</span> <span class="text-[8px] font-black text-slate-300 uppercase tracking-[0.2em]">Mar 11, 2026</span> </div> <h3 class="text-xl font-black text-slate-900 tracking-tighter mb-4 italic leading-tight">Advanced Logic Scaling in Distributed Networks.</h3> <p class="text-slate-500 font-bold text-xs leading-relaxed italic line-clamp-2">Exploring the frontiers of neural latency in high-performance cloud ecosystems...</p> </div> <div class="mt-6"> <a href="##" class="group flex items-center gap-2 text-[10px] font-black text-slate-900 uppercase tracking-[0.2em] hover:text-indigo-600 transition-colors"> Read Manifest <svg class="h-4 w-4 transform group-hover:translate-x-2 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg> </a> </div> </div> </div> </body> </html>
