<!-- This example requires some changes to your config: ``` // tailwind.config.js module.exports = { // ... plugins: [ // ... require('@tailwindcss/forms'), ], } ``` --> <fieldset> <legend class="sr-only">Pricing plans</legend> <div class="relative -space-y-px rounded-md bg-white"> <!-- Checked: "bg-indigo-50 border-indigo-200 z-10", Not Checked: "border-gray-200" --> <label class="rounded-tl-md rounded-tr-md relative border p-4 flex flex-col cursor-pointer md:pl-4 md:pr-6 md:grid md:grid-cols-3 focus:outline-none"> <span class="flex items-center text-sm"> <input type="radio" name="pricing-plan" value="Startup" class="h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500" aria-labelledby="pricing-plans-0-label" aria-describedby="pricing-plans-0-description-0 pricing-plans-0-description-1"> <!-- Checked: "text-indigo-900", Not Checked: "text-gray-900" --> <span id="pricing-plans-0-label" class="ml-3 font-medium">Startup</span> </span> <span id="pricing-plans-0-description-0" class="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center"> <!-- Checked: "text-indigo-900", Not Checked: "text-gray-900" --> <span class="font-medium">$29 / mo</span> <!-- Checked: "text-indigo-700", Not Checked: "text-gray-500" --> <span>($290 / yr)</span> </span> <!-- Checked: "text-indigo-700", Not Checked: "text-gray-500" --> <span id="pricing-plans-0-description-1" class="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">Up to 5 active job postings</span> </label> <!-- Checked: "bg-indigo-50 border-indigo-200 z-10", Not Checked: "border-gray-200" --> <label class="relative border p-4 flex flex-col cursor-pointer md:pl-4 md:pr-6 md:grid md:grid-cols-3 focus:outline-none"> <span class="flex items-center text-sm"> <input type="radio" name="pricing-plan" value="Business" class="h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500" aria-labelledby="pricing-plans-1-label" aria-describedby="pricing-plans-1-description-0 pricing-plans-1-description-1"> <!-- Checked: "text-indigo-900", Not Checked: "text-gray-900" --> <span id="pricing-plans-1-label" class="ml-3 font-medium">Business</span> </span> <span id="pricing-plans-1-description-0" class="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center"> <!-- Checked: "text-indigo-900", Not Checked: "text-gray-900" --> <span class="font-medium">$99 / mo</span> <!-- Checked: "text-indigo-700", Not Checked: "text-gray-500" --> <span>($990 / yr)</span> </span> <!-- Checked: "text-indigo-700", Not Checked: "text-gray-500" --> <span id="pricing-plans-1-description-1" class="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">Up to 25 active job postings</span> </label> <!-- Checked: "bg-indigo-50 border-indigo-200 z-10", Not Checked: "border-gray-200" --> <label class="rounded-bl-md rounded-br-md relative border p-4 flex flex-col cursor-pointer md:pl-4 md:pr-6 md:grid md:grid-cols-3 focus:outline-none"> <span class="flex items-center text-sm"> <input type="radio" name="pricing-plan" value="Enterprise" class="h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500" aria-labelledby="pricing-plans-2-label" aria-describedby="pricing-plans-2-description-0 pricing-plans-2-description-1"> <!-- Checked: "text-indigo-900", Not Checked: "text-gray-900" --> <span id="pricing-plans-2-label" class="ml-3 font-medium">Enterprise</span> </span> <span id="pricing-plans-2-description-0" class="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center"> <!-- Checked: "text-indigo-900", Not Checked: "text-gray-900" --> <span class="font-medium">$249 / mo</span> <!-- Checked: "text-indigo-700", Not Checked: "text-gray-500" --> <span>($2490 / yr)</span> </span> <!-- Checked: "text-indigo-700", Not Checked: "text-gray-500" --> <span id="pricing-plans-2-description-1" class="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">Unlimited active job postings</span> </label> </div> </fieldset>