<div class="w-full bg-gray-100 dark:bg-gray-950 min-h-screen flex flex-grow">
    <div class="bg-gray-100 hidden lg:flex flex-col justify-center items-center w-1/2">
        <div class="max-w-lg w-full m-auto px-6 py-6 sm:py-10">
            <div class="flex justify-between">
                <h3 class="text-lg lg:text-3xl font-medium">Monthly subscription</h3>
                <div class="text-lg lg:text-xl font-medium">$9.99</div>
            </div>
            <div class="mt-2 text-gray-500 dark:text-gray-400 text-sm">$9.99 billed every month</div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-900 w-full lg:w-1/2 flex flex-col">
        <div class="max-w-lg w-full m-auto px-6 py-6 sm:py-10">
            <div class="mb-5">
                <label for="input-number" class="block text-sm font-medium mb-2 dark:text-white">Card number</label>
                <input type="text" id="input-number" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 placeholder-gray-300 dark:placeholder-gray-500 shadow-sm" placeholder="0000 0000 0000 0000">
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6">
                <div class="mb-5">
                    <label for="input-exp" class="block text-sm font-medium mb-2 dark:text-white">Expiration</label>
                    <input type="text" id="input-exp" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 placeholder-gray-300 dark:placeholder-gray-500 shadow-sm" placeholder="MM/YY">
                </div>
                <div class="mb-5">
                    <label for="input-exp" class="block text-sm font-medium mb-2 dark:text-white">CVC</label>
                    <input type="text" id="input-exp" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 placeholder-gray-300 dark:placeholder-gray-500 shadow-sm" placeholder="CVC">
                </div>
            </div>
            <div class="mb-5 text-xs text-gray-400 dark:text-gray-500">By providing your card information, you allow
                Company to charge your card for future payments in accordance with their terms.
            </div>
            <div class="mb-5">
                <label for="input-number" class="block text-sm font-medium mb-2 dark:text-white">Cardholder name</label>
                <input type="text" id="input-number" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 placeholder-gray-300 dark:placeholder-gray-500 shadow-sm" placeholder="John Doe">
            </div>
            <div class="mb-5">
                <label for="input-country" class="block text-sm font-medium mb-2 dark:text-white">Billing
                    address</label>
                <select id="input-country" class="py-3 px-4 block w-full border-gray-200 rounded-t-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 placeholder-gray-300 dark:placeholder-gray-500">
                    <option>Country</option>
                </select>
                <input type="text" id="input-zip" class="py-3 px-4 block w-full border-gray-200 rounded-b-lg border-t-0 text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 placeholder-gray-300 dark:placeholder-gray-500 shadow-sm" placeholder="Zip Code">
            </div>
            <div class="mb-5">
                <div class="flex justify-between py-1 text-gray-700 dark:text-gray-200 font-medium">
                    <div>Subtotal</div>
                    <div>$9.99</div>
                </div>
                <div class="flex justify-between py-1 text-gray-700 dark:text-gray-200 font-medium">
                    <div>Total</div>
                    <div>$9.99</div>
                </div>
            </div>
            <button type="button" class="w-full py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all dark:focus:ring-offset-gray-800">
                Pay $9.99
            </button>
        </div>
    </div>
</div>