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 Split Screen Layout</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-white min-h-screen flex flex-col md:flex-row antialiased"> <!-- Left Side: Visual/Immersive --> <section class="w-full md:w-1/2 lg:w-[45%] bg-slate-900 text-white p-12 md:p-24 flex flex-col justify-between relative overflow-hidden"> <!-- Atmospheric Motif --> <div class="absolute -top-40 -left-40 h-[40rem] w-[40rem] bg-indigo-600/20 rounded-full blur-[120px]"></div> <div class="relative z-10 flex items-center justify-between"> <span class="text-xl font-black text-white tracking-tighter uppercase">Vanguard</span> <button class="md:hidden p-4 rounded-xl bg-white/10"><svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" /></svg></button> </div> <div class="relative z-10 space-y-12 py-24 md:py-0"> <div class="space-y-4"> <span class="text-[10px] font-black text-indigo-400 uppercase tracking-[0.6em]">Spectral Access</span> <h1 class="text-6xl md:text-7xl font-black tracking-tight leading-none text-white">Join the <br>Collective</h1> </div> <p class="text-xl text-slate-400 leading-relaxed font-light italic max-w-md">"Sovereign data integrity for the next generation of distributed systems."</p> </div> <div class="relative z-10 pt-12 border-t border-white/5 grid grid-cols-2 gap-8 opacity-40"> <div class="space-y-1"> <p class="text-[9px] font-black uppercase tracking-widest text-slate-500">Node Hubs</p> <p class="text-xl font-bold font-mono">14.2k</p> </div> <div class="space-y-1"> <p class="text-[9px] font-black uppercase tracking-widest text-slate-500">Uptime</p> <p class="text-xl font-bold font-mono">99.98%</p> </div> </div> </section> <!-- Right Side: Interaction/Form --> <section class="flex-1 flex flex-col justify-center p-12 md:p-24 lg:p-32 bg-gray-50"> <div class="max-w-md w-full mx-auto space-y-12"> <div class="space-y-4"> <h2 class="text-3xl font-black text-slate-900 tracking-tight">Sync Your Terminal</h2> <p class="text-slate-500 font-medium">Initialise your connection to the Vanguard Vanguard layers.</p> </div> <form class="space-y-8"> <div class="space-y-6"> <div class="space-y-2"> <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">Protocol Identifier</label> <input type="text" placeholder="e.g. Architect Zero" class="w-full bg-white border-2 border-slate-100 p-6 rounded-2xl focus:border-indigo-600 outline-none transition-all font-bold placeholder:text-slate-300"> </div> <div class="space-y-2"> <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">Access Cipher</label> <input type="password" placeholder="••••••••" class="w-full bg-white border-2 border-slate-100 p-6 rounded-2xl focus:border-indigo-600 outline-none transition-all font-bold placeholder:text-slate-300"> </div> </div> <button class="w-full py-6 bg-slate-900 text-white rounded-[2rem] text-xs font-black uppercase tracking-[0.2em] shadow-2xl shadow-slate-900/20 hover:bg-indigo-600 transition-all hover:-translate-y-1">Establish Connection</button> </form> <div class="flex items-center justify-center gap-4 pt-12"> <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Single Sign On Protocol</span> </div> </div> </section> </body> </html>
