<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="p-8">
  <div class="relative w-full h-screen bg-white overflow-hidden">
    <!-- Background Design -->
    <div class="absolute inset-0">
        <!-- Left side - White section with ISHP logo -->
        <div
            class="absolute left-0 top-0 w-1/3 h-full bg-white flex items-start justify-start p-8"
        >
            <div class="text-black font-bold text-4xl tracking-wider">ISHP</div>
        </div>

        <!-- Diagonal cyan divider -->
        <div class="absolute left-0 top-0 w-full h-full">
            <svg
                viewBox="0 0 100 100"
                class="w-full h-full"
                preserveAspectRatio="none"
            >
                <polygon points="0,0 35,0 25,100 0,100" fill="#22d3ee" />
            </svg>
        </div>

        <!-- Right side - Black section -->
        <div class="absolute right-0 top-0 w-2/3 h-full bg-black">
            <!-- Dotted pattern at bottom -->
            <div
                class="absolute bottom-0 left-0 w-full h-32 flex items-end justify-start pl-8 pb-8"
            >
                <div class="grid grid-cols-16 gap-2">
                    <!-- Creating dotted pattern -->
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                </div>
            </div>

            <!-- Additional rows of dots -->
            <div
                class="absolute bottom-16 left-0 w-full h-8 flex items-center justify-start pl-8"
            >
                <div class="grid grid-cols-16 gap-2">
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                </div>
            </div>

            <div
                class="absolute bottom-32 left-0 w-full h-8 flex items-center justify-start pl-8"
            >
                <div class="grid grid-cols-16 gap-2">
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                    <div class="w-2 h-2 bg-white rounded-full opacity-60"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Content -->
    <div
        class="relative z-10 h-full flex flex-col items-center justify-center text-white"
    >
        <!-- Main Title -->
        <div class="text-center mb-8">
            <h1 class="text-6xl font-bold tracking-wider mb-4">BIO-PERFORMX</h1>
            <p class="text-2xl font-light italic">Endurance</p>
        </div>

        <!-- Patient Name -->
        <div class="text-center mb-12">
            <h2 class="text-4xl font-bold tracking-widest">John Doe</h2>
            <h2 class="text-4xl font-bold tracking-widest">Moran</h2>
        </div>

        <!-- Date -->
        <div class="text-center">
            <p class="text-xl font-light italic underline">July 29, 2025</p>
        </div>
    </div>
</div>
</body>
</html>