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 Centered Modal</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-indigo-50 flex items-center justify-center min-h-screen p-6 antialiased" x-data="{ open: true }"> <button @click="open = true" class="px-8 py-3 bg-white text-slate-900 rounded-2xl font-bold border border-slate-200 shadow-sm hover:bg-slate-50 transition cursor-pointer">Re-open Hub</button> <div x-show="open" class="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto" style="display: none;" > <!-- Background backdrop --> <div x-show="open" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 bg-slate-900/40 backdrop-blur-md" @click="open = false" ></div> <!-- Modal dialogue content --> <div x-show="open" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" class="relative bg-white rounded-[2.5rem] shadow-3xl w-full max-w-lg mx-4 overflow-hidden" > <div class="px-10 py-12 text-center"> <div class="h-20 w-20 bg-indigo-50 text-indigo-600 rounded-3xl flex items-center justify-center mx-auto mb-8 shadow-inner"> <svg class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A10.003 10.003 0 0012 3a9.99 9.99 0 015.566 1.693L17.65 4.757a10.003 10.003 0 00-4.65 15.243m-3.44-2.04L10 18.001"/></svg> </div> <h3 class="text-3xl font-black text-slate-900 tracking-tight mb-4 italic">Neural Core Connection.</h3> <p class="text-slate-500 font-medium leading-relaxed mb-10">Establishing an encrypted bridge between your local environment and the distributed cloud manifest. Do not lose power.</p> <div class="flex gap-4 items-center justify-center"> <button @click="open = false" class="px-8 h-14 bg-slate-900 text-white rounded-2xl font-bold hover:bg-slate-800 transition shadow-xl shrink-0">Initiate Link</button> <button @click="open = false" class="px-8 h-14 bg-white text-slate-400 rounded-2xl font-bold hover:bg-slate-50 transition border border-slate-100 shrink-0">Abort</button> </div> </div> </div> </div> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
