tailwind-ai/application_ui/forms/radio_groups/stacked_cards.html

<fieldset aria-label="Server size">
    <div class="space-y-4">
        <label
            aria-label="Hobby"
            aria-description="8GB, 4 CPUs, 160 GB SSD disk, $40 per month"
            class="group relative block rounded-lg border border-gray-300 bg-white px-6 py-4 has-checked:outline-2 has-checked:-outline-offset-2 has-checked:outline-indigo-600 has-focus-visible:outline-3 has-focus-visible:-outline-offset-1 sm:flex sm:justify-between"
        >
            <input
                type="radio"
                name="plan"
                value="hobby"
                checked
                class="absolute inset-0 appearance-none focus:outline-none"
            />
            <span class="flex items-center">
                <span class="flex flex-col text-sm">
                    <span class="font-medium text-gray-900">Hobby</span>
                    <span class="text-gray-500">
                        <span class="block sm:inline">8GB / 4 CPUs</span>
                        <span
                            aria-hidden="true"
                            class="hidden sm:mx-1 sm:inline"
                            >&middot;</span
                        >
                        <span class="block sm:inline">160 GB SSD disk</span>
                    </span>
                </span>
            </span>
            <span
                class="mt-2 flex text-sm sm:mt-0 sm:ml-4 sm:flex-col sm:text-right"
            >
                <span class="font-medium text-gray-900">$40</span>
                <span class="ml-1 text-gray-500 sm:ml-0">/mo</span>
            </span>
        </label>
        <label
            aria-label="Startup"
            aria-description="12GB, 6 CPUs, 256 GB SSD disk, $80 per month"
            class="group relative block rounded-lg border border-gray-300 bg-white px-6 py-4 has-checked:outline-2 has-checked:-outline-offset-2 has-checked:outline-indigo-600 has-focus-visible:outline-3 has-focus-visible:-outline-offset-1 sm:flex sm:justify-between"
        >
            <input
                type="radio"
                name="plan"
                value="startup"
                class="absolute inset-0 appearance-none focus:outline-none"
            />
            <span class="flex items-center">
                <span class="flex flex-col text-sm">
                    <span class="font-medium text-gray-900">Startup</span>
                    <span class="text-gray-500">
                        <span class="block sm:inline">12GB / 6 CPUs</span>
                        <span
                            aria-hidden="true"
                            class="hidden sm:mx-1 sm:inline"
                            >&middot;</span
                        >
                        <span class="block sm:inline">256 GB SSD disk</span>
                    </span>
                </span>
            </span>
            <span
                class="mt-2 flex text-sm sm:mt-0 sm:ml-4 sm:flex-col sm:text-right"
            >
                <span class="font-medium text-gray-900">$80</span>
                <span class="ml-1 text-gray-500 sm:ml-0">/mo</span>
            </span>
        </label>
        <label
            aria-label="Business"
            aria-description="16GB, 8 CPUs, 512 GB SSD disk, $160 per month"
            class="group relative block rounded-lg border border-gray-300 bg-white px-6 py-4 has-checked:outline-2 has-checked:-outline-offset-2 has-checked:outline-indigo-600 has-focus-visible:outline-3 has-focus-visible:-outline-offset-1 sm:flex sm:justify-between"
        >
            <input
                type="radio"
                name="plan"
                value="business"
                class="absolute inset-0 appearance-none focus:outline-none"
            />
            <span class="flex items-center">
                <span class="flex flex-col text-sm">
                    <span class="font-medium text-gray-900">Business</span>
                    <span class="text-gray-500">
                        <span class="block sm:inline">16GB / 8 CPUs</span>
                        <span
                            aria-hidden="true"
                            class="hidden sm:mx-1 sm:inline"
                            >&middot;</span
                        >
                        <span class="block sm:inline">512 GB SSD disk</span>
                    </span>
                </span>
            </span>
            <span
                class="mt-2 flex text-sm sm:mt-0 sm:ml-4 sm:flex-col sm:text-right"
            >
                <span class="font-medium text-gray-900">$160</span>
                <span class="ml-1 text-gray-500 sm:ml-0">/mo</span>
            </span>
        </label>
        <label
            aria-label="Enterprise"
            aria-description="32GB, 12 CPUs, 1024 GB SSD disk, $240 per month"
            class="group relative block rounded-lg border border-gray-300 bg-white px-6 py-4 has-checked:outline-2 has-checked:-outline-offset-2 has-checked:outline-indigo-600 has-focus-visible:outline-3 has-focus-visible:-outline-offset-1 sm:flex sm:justify-between"
        >
            <input
                type="radio"
                name="plan"
                value="enterprise"
                class="absolute inset-0 appearance-none focus:outline-none"
            />
            <span class="flex items-center">
                <span class="flex flex-col text-sm">
                    <span class="font-medium text-gray-900">Enterprise</span>
                    <span class="text-gray-500">
                        <span class="block sm:inline">32GB / 12 CPUs</span>
                        <span
                            aria-hidden="true"
                            class="hidden sm:mx-1 sm:inline"
                            >&middot;</span
                        >
                        <span class="block sm:inline">1024 GB SSD disk</span>
                    </span>
                </span>
            </span>
            <span
                class="mt-2 flex text-sm sm:mt-0 sm:ml-4 sm:flex-col sm:text-right"
            >
                <span class="font-medium text-gray-900">$240</span>
                <span class="ml-1 text-gray-500 sm:ml-0">/mo</span>
            </span>
        </label>
    </div>
</fieldset>