<!--
  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>