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 Text Truncate</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="antialiased"> <div class="bg-slate-50 dark:bg-slate-900 min-h-screen p-8 flex items-center justify-center"> <div class="max-w-md w-full bg-white dark:bg-slate-800 rounded-xl shadow-md overflow-hidden"> <div class="p-4 bg-slate-100 dark:bg-slate-800/50 border-b border-slate-200 dark:border-slate-700"> <h3 class="font-semibold text-slate-800 dark:text-white">Recent Files</h3> </div> <ul class="divide-y divide-slate-100 dark:divide-slate-700"> <li class="p-4 flex items-center group cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors"> <div class="w-10 h-10 rounded-lg bg-indigo-100 dark:bg-indigo-900/40 text-indigo-600 dark:text-indigo-400 flex items-center justify-center flex-shrink-0 mr-4"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg> </div> <div class="min-w-0 flex-1"> <p class="text-sm font-medium text-slate-900 dark:text-white truncate">tailwind_v4_comprehensive_migration_guide_draft_final_v2.md</p> <p class="text-xs text-slate-500 dark:text-slate-400 truncate">Modified entirely by you on Tuesday, 4:20 PM</p> </div> </li> <li class="p-4 flex items-center group cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors"> <div class="w-10 h-10 rounded-lg bg-emerald-100 dark:bg-emerald-900/40 text-emerald-600 dark:text-emerald-400 flex items-center justify-center flex-shrink-0 mr-4"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg> </div> <div class="min-w-0 flex-1"> <p class="text-sm font-medium text-slate-900 dark:text-white truncate">Q3_financial_earnings_report_spreadsheet_analysis.xlsx</p> <p class="text-xs text-slate-500 dark:text-slate-400 truncate">Shared by the accounting department recently</p> </div> </li> </ul> </div> </div> </body> </html>
