Docs TailwindCSS

<div class="max-w-3xl mx-auto bg-white p-8 rounded-2xl shadow-sm border border-gray-100">
    <div class="mb-8 border-b border-gray-100 pb-5">
        <h2 class="text-2xl font-bold text-gray-800">Formulir Pendaftaran Profil</h2>
        <p class="text-gray-500 text-sm mt-1">Lengkapi data di bawah ini untuk memperbarui profil dan portofolio Anda.</p>
    </div>

    <form action="#" method="POST">
        <!-- Grid Layout untuk Input Berjejer di Layar Besar -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            
            <!-- 1. Text Input (Nama Lengkap) -->
            <div>
                <label for="fullName" class="block text-sm font-semibold text-gray-700 mb-2">Nama Lengkap</label>
                <input type="text" id="fullName" name="fullName" placeholder="Contoh: Riski Abiyantoro" 
                    class="w-full px-4 py-2.5 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:bg-white outline-none transition-all duration-300">
            </div>

            <!-- 2. Email Input -->
            <div>
                <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">Alamat Email</label>
                <input type="email" id="email" name="email" placeholder="nama@email.com" 
                    class="w-full px-4 py-2.5 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:bg-white outline-none transition-all duration-300">
            </div>

            <!-- 3. Password Input -->
            <div>
                <label for="password" class="block text-sm font-semibold text-gray-700 mb-2">Kata Sandi</label>
                <input type="password" id="password" name="password" placeholder="Minimal 8 karakter" 
                    class="w-full px-4 py-2.5 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:bg-white outline-none transition-all duration-300">
            </div>

            <!-- 4. Select Dropdown (Posisi/Role) -->
            <div>
                <label for="role" class="block text-sm font-semibold text-gray-700 mb-2">Posisi Utama</label>
                <select id="role" name="role" 
                    class="w-full px-4 py-2.5 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:bg-white outline-none transition-all duration-300 appearance-none">
                    <option value="" disabled selected>Pilih spesialisasi Anda...</option>
                    <option value="programmer">Programmer Laravel</option>
                    <option value="staff">Staff Manning Agency</option>
                    <option value="3d_artist">3D Modeler / Animator</option>
                    <option value="other">Lainnya</option>
                </select>
            </div>
        </div>

        <!-- 5. Checkbox (Keahlian / Minat) - Rentang Lebar Penuh -->
        <div class="mb-6">
            <label class="block text-sm font-semibold text-gray-700 mb-3">Teknologi & Minat yang Dikuasai</label>
            <div class="flex flex-wrap gap-4">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" value="laravel" class="w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
                    <span class="text-sm text-gray-700">Laravel / PHP</span>
                </label>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" value="unity" class="w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
                    <span class="text-sm text-gray-700">Unity 3D</span>
                </label>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" value="blender" class="w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
                    <span class="text-sm text-gray-700">Blender</span>
                </label>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" value="anime" class="w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
                    <span class="text-sm text-gray-700">Animasi / Anime</span>
                </label>
            </div>
        </div>

        <!-- 6. Radio Button (Status Pekerjaan) -->
        <div class="mb-6">
            <label class="block text-sm font-semibold text-gray-700 mb-3">Status Ketersediaan</label>
            <div class="flex items-center gap-6">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="radio" name="status" value="fulltime" class="w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 focus:ring-2">
                    <span class="text-sm text-gray-700">Tersedia (Siap Bekerja)</span>
                </label>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="radio" name="status" value="freelance" class="w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 focus:ring-2">
                    <span class="text-sm text-gray-700">Hanya Freelance/Project</span>
                </label>
            </div>
        </div>

        <!-- 7. Textarea (Bio/Deskripsi) -->
        <div class="mb-6">
            <label for="bio" class="block text-sm font-semibold text-gray-700 mb-2">Tentang Anda & Portofolio</label>
            <textarea id="bio" name="bio" rows="4" placeholder="Ceritakan pengalaman Anda membuat sistem, atau project 3D yang pernah dieksplorasi..." 
                class="w-full px-4 py-3 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:bg-white outline-none transition-all duration-300 resize-y"></textarea>
            <p class="text-xs text-gray-500 mt-1.5">Tuliskan ringkasan singkat maksimal 500 karakter.</p>
        </div>

        <!-- 8. File Input (Unggah CV/Dokumen) -->
        <div class="mb-8">
            <label class="block text-sm font-semibold text-gray-700 mb-2">Unggah CV atau Dokumen</label>
            <input class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 file:mr-4 file:py-2.5 file:px-4 file:rounded-l-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 transition-all duration-300" id="file_input" type="file">
        </div>

        <!-- Action Buttons -->
        <div class="flex items-center justify-end gap-3 pt-5 border-t border-gray-100">
            <button type="button" class="px-6 py-2.5 rounded-lg text-sm font-semibold text-gray-700 hover:bg-gray-100 border border-transparent hover:border-gray-300 transition-all duration-300">
                Batal
            </button>
            <button type="submit" class="px-6 py-2.5 rounded-lg text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 shadow-sm transition-colors duration-300 focus:ring-4 focus:ring-blue-200">
                Simpan Profil
            </button>
        </div>
    </form>
</div>

<div class="max-w-md mx-auto bg-gray-900 p-10 rounded-3xl shadow-2xl border border-gray-800 relative overflow-hidden">
    <div class="absolute -top-10 -right-10 w-40 h-40 bg-purple-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30"></div>
    <div class="absolute -bottom-10 -left-10 w-40 h-40 bg-pink-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30"></div>

    <div class="relative z-10">
        <div class="mb-10 text-center">
            <h2 class="text-4xl font-black tracking-tighter mb-2 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 bg-clip-text text-transparent">
                NEXUS PORTAL
            </h2>
            <p class="font-serif italic text-gray-400 text-sm">
                Akses khusus kreator 3D & Anime
            </p>
        </div>

        <form action="#" method="POST" class="space-y-6">
            <div>
                <label for="username" class="block font-mono text-xs tracking-widest text-purple-400 uppercase mb-2">
                    [ ID Kreator ]
                </label>
                <input type="text" id="username" placeholder="Masukkan ID Anda..." 
                    class="w-full bg-gray-800/50 text-white font-semibold px-4 py-3 border-b-2 border-gray-700 focus:border-pink-500 focus:bg-gray-800 outline-none transition-colors rounded-t-lg placeholder-gray-600">
            </div>

            <div>
                <label for="passcode" class="block font-mono text-xs tracking-widest text-purple-400 uppercase mb-2">
                    [ Kata Sandi ]
                </label>
                <input type="password" id="passcode" placeholder="••••••••" 
                    class="w-full bg-gray-800/50 text-white font-bold tracking-widest px-4 py-3 border-b-2 border-gray-700 focus:border-pink-500 focus:bg-gray-800 outline-none transition-colors rounded-t-lg placeholder-gray-600">
            </div>

            <div class="pt-4">
                <button type="submit" class="w-full relative group overflow-hidden rounded-xl p-[1px]">
                    <span class="absolute inset-0 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl opacity-70 group-hover:opacity-100 transition-opacity duration-300"></span>
                    <div class="relative bg-gray-900 px-8 py-3 rounded-xl transition-all duration-300 group-hover:bg-opacity-0">
                        <span class="font-sans font-bold tracking-widest text-white uppercase text-sm">
                            Inisiasi Login
                        </span>
                    </div>
                </button>
            </div>
        </form>
    </div>
</div>

<div class="relative min-h-screen flex items-center justify-center p-4">
    
    <div class="absolute inset-0 z-0">
        <img src="https://4kwallpapers.com/images/walls/thumbs_2t/24494.jpg" class="w-full h-full object-cover" alt="Corporate Background">
        <div class="absolute inset-0 bg-blue-950/80 backdrop-blur-sm"></div>
    </div>

    <div class="relative z-10 w-full max-w-md bg-white rounded-2xl shadow-2xl overflow-hidden border border-white/20">
        
        <div class="bg-gray-50 px-8 pt-10 pb-6 text-center border-b border-gray-100">
            <div class="inline-flex items-center justify-center w-14 h-14 bg-blue-600 rounded-xl shadow-md mb-5 text-white">
                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
            </div>
            <h2 class="text-2xl font-bold text-gray-900 tracking-tight">Manning Portal</h2>
            <p class="text-gray-500 text-sm mt-1.5 font-medium">Sistem Informasi Terpadu Staff & Kru</p>
        </div>

        <div class="p-8">
            <form action="#" method="POST" class="space-y-5">
                
                <div>
                    <label for="staff_id" class="block text-sm font-bold text-gray-700 mb-1.5">ID Staff / Email</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
                            <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                        </div>
                        <input type="text" id="staff_id" placeholder="Cth: STF-2026"
                            class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-600 focus:border-blue-600 outline-none transition-all bg-white text-gray-900 text-sm shadow-sm placeholder-gray-400">
                    </div>
                </div>

                <div>
                    <div class="flex justify-between items-center mb-1.5">
                        <label for="password" class="block text-sm font-bold text-gray-700">Kata Sandi</label>
                        <a href="#" class="text-xs font-semibold text-blue-600 hover:text-blue-800 transition-colors">Lupa sandi?</a>
                    </div>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
                            <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
                        </div>
                        <input type="password" id="password" placeholder="••••••••"
                            class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-600 focus:border-blue-600 outline-none transition-all bg-white text-gray-900 text-sm shadow-sm placeholder-gray-400">
                    </div>
                </div>

                <div class="flex items-center pt-1">
                    <input id="remember" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded cursor-pointer transition-colors">
                    <label for="remember" class="ml-2.5 block text-sm font-medium text-gray-600 cursor-pointer select-none">
                        Simpan sesi login di perangkat ini
                    </label>
                </div>

                <div class="pt-2">
                    <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg shadow-sm hover:shadow-md transition-all duration-300 focus:ring-4 focus:ring-blue-200 flex justify-center items-center gap-2">
                        Masuk Sistem
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                    </button>
                </div>
            </form>

            <div class="mt-8 pt-6 border-t border-gray-100">
                <button class="w-full flex items-center justify-center gap-3 px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 hover:border-gray-300 transition-all text-sm font-semibold text-gray-700 shadow-sm">
                    <svg class="w-5 h-5 text-[#00a4ef]" fill="currentColor" viewBox="0 0 24 24"><path d="M11.4 24H0V12.6h11.4V24zM24 24H12.6V12.6H24V24zM11.4 11.4H0V0h11.4v11.4zm12.6 0H12.6V0H24v11.4z"/></svg>
                    Login dengan Microsoft Azure
                </button>
            </div>

        </div>
    </div>
</div>