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 Skeleton Card</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex justify-center items-center min-h-screen p-6 antialiased"> <div class="max-w-md w-full"> <div class="bg-white rounded-[3rem] overflow-hidden border border-slate-100 shadow-sm animate-pulse"> <!-- Skeleton Image --> <div class="aspect-[16/10] bg-slate-100"></div> <!-- Skeleton Content --> <div class="p-10 space-y-8"> <div class="space-y-3"> <div class="h-2 w-24 bg-slate-100 rounded-full"></div> <div class="h-7 w-full bg-slate-100 rounded-xl"></div> <div class="h-7 w-[80%] bg-slate-100 rounded-xl"></div> </div> <div class="space-y-4"> <div class="h-4 w-full bg-slate-50 rounded-lg"></div> <div class="h-4 w-full bg-slate-50 rounded-lg"></div> <div class="h-4 w-[60%] bg-slate-50 rounded-lg"></div> </div> <!-- Skeleton Author --> <div class="pt-6 border-t border-slate-50 flex items-center gap-4"> <div class="h-10 w-10 rounded-xl bg-slate-100"></div> <div class="space-y-2"> <div class="h-3 w-20 bg-slate-100 rounded-full"></div> <div class="h-2 w-16 bg-slate-50 rounded-full"></div> </div> </div> </div> </div> <p class="text-center text-[10px] font-black text-slate-300 uppercase tracking-[0.4em] mt-8">Initializing Identity Manifest...</p> </div> </body> </html>
