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 File Upload</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-sm"> <label class="block text-[10px] font-black text-slate-400 uppercase tracking-[0.3em] mb-4 ml-2 text-shadow-sm">Node Payload</label> <div class="flex items-center justify-center w-full"> <label for="file-upload" class="flex flex-col items-center justify-center w-full h-48 border-4 border-slate-100 border-dashed rounded-[2.5rem] bg-white cursor-pointer hover:bg-slate-50 hover:border-indigo-200 transition-all group shadow-sm"> <div class="flex flex-col items-center justify-center pt-5 pb-6"> <svg class="w-10 h-10 mb-4 text-slate-300 group-hover:text-indigo-500 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg> <p class="mb-2 text-xs font-black text-slate-900 uppercase tracking-[0.1em]">Transmit Data Packet</p> <p class="text-[10px] text-slate-400 font-bold italic">Max File Size: 100MB</p> </div> <input id="file-upload" type="file" class="hidden" /> </label> </div> </div> </body> </html>
