HTML

<!DOCTYPE html>

<html lang="en" class="h-full bg-[#0B0B0B]">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>[ RAWSAMPLE.XYZ ]</title>

    <!-- Tailwind CSS via CDN -->

    <script src="https://cdn.tailwindcss.com"></script>

    <script>

        tailwind.config = {

            theme: {

                extend: {

                    fontFamily: {

                        mono: ['SF Mono', 'Fira Code', 'Courier New', 'monospace'],

                    }

                }

            }

        }

    </script>

</head>

<body class="h-full font-mono text-[#8E8E93] flex flex-col justify-between p-6 select-none antialiased">


    <!-- Top Status Bar -->

    <header class="w-full flex justify-between text-xs tracking-[0.2em] uppercase">

        <div class="flex items-center gap-2">

            <span class="w-1.5 h-1.5 bg-[#00FF66] rounded-full animate-pulse"></span>

            <span>SYSTEM: SECURE</span>

        </div>

        <div>REV_0.01</div>

    </header>


    <!-- Center Interactive Interface -->

    <main class="max-w-md w-full mx-auto flex flex-col gap-6 justify-center flex-grow">

        <div class="space-y-1">

            <h1 class="text-white text-base font-bold tracking-[0.3em] uppercase">

                [ RAW_SAMPLE . XYZ ]

            </h1>

            <p class="text-xs tracking-[0.15em] text-[#555555]">

                RESTRICTED_ACCESS_PORTAL

            </p>

        </div>


        <!-- Access Input Form -->

        <form onsubmit="event.preventDefault();" class="space-y-4">

            <div class="relative flex items-center">

                <span class="absolute left-0 text-white text-sm tracking-widest pl-1">&gt;</span>

                <input 

                    type="password" 

                    placeholder="ENTER_PASSKEY" 

                    autofocus

                    class="w-full bg-transparent border-b border-[#333333] focus:border-white text-white text-sm tracking-[0.4em] pl-6 py-2 outline-none transition-colors duration-300 placeholder:text-[#333333] placeholder:tracking-[0.15em]"

                >

            </div>

            <button 

                type="submit" 

                class="hidden text-xs text-white border border-white px-4 py-2 hover:bg-white hover:text-black transition-colors duration-200 uppercase tracking-widest"

            >

                Execute

            </button>

        </form>

    </main>


    <!-- Bottom Data Footer -->

    <footer class="w-full flex justify-between text-[10px] tracking-[0.2em] text-[#333333] uppercase">

        <div>© 2026 RAWSAMPLE</div>

        <div>ROOT//HOST_CONNECTED</div>

    </footer>


</body>

</html>