| <body class="p-4 flex items-center justify-center bg-gray-100 min-h-screen"> | |
| <form class="w-full max-w-screen-md mx-auto"> | |
| <fieldset class="space-y-6"> | |
| <div class="flex items-center justify-between py-4 border-b border-gray-300"> | |
| <legend class="text-2xl text-gray-700 mr-4">Change Plan</legend> | |
| <a href="#" class="font-medium text-gray-500 hover:text-gray-700">Cancel your plan</a> | |
| </div> | |
| <div class="grid sm:grid-cols-4 gap-6"> | |
| <label for="plan-hobby" class="relative flex flex-col bg-white p-5 rounded-lg shadow-md cursor-pointer"> | |
| <span class="font-semibold text-gray-500 leading-tight uppercase mb-3">Hobby</span> | |
| <span class="font-bold text-gray-900"> | |
| <span class="text-4xl">1</span> | |
| <span class="text-2xl uppercase">GB</span> | |
| </span> | |
| <span> | |
| <span class="text-xl font-bold text-gray-500">$</span> | |
| <span class="text-xl font-bold text-gray-900 -ml-1">5</span> | |
| <span class="text-xl font-semibold text-gray-500">/</span> | |
| <span class="text-lg font-semibold text-gray-500">mo</span> | |
| </span> | |
| <input type="radio" name="plan" id="plan-hobby" value="hobby" class="absolute h-0 w-0 appearance-none" /> | |
| <span aria-hidden="true" class="hidden absolute inset-0 border-2 border-green-500 bg-green-200 bg-opacity-10 rounded-lg"> | |
| <span class="absolute top-4 right-4 h-6 w-6 inline-flex items-center justify-center rounded-full bg-green-200"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-green-600"> | |
| <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /> | |
| </svg> | |
| </span> | |
| </span> | |
| </label> | |
| <label for="plan-growth" class="relative flex flex-col bg-white p-5 rounded-lg shadow-md cursor-pointer"> | |
| <span class="font-semibold text-gray-500 leading-tight uppercase mb-3">Growth</span> | |
| <span class="font-bold text-gray-900"> | |
| <span class="text-4xl">5</span> | |
| <span class="text-2xl uppercase">GB</span> | |
| </span> | |
| <span> | |
| <span class="text-xl font-bold text-gray-500">$</span> | |
| <span class="text-xl font-bold text-gray-900 -ml-1">10</span> | |
| <span class="text-xl font-semibold text-gray-500">/</span> | |
| <span class="text-lg font-semibold text-gray-500">mo</span> | |
| </span> | |
| <input type="radio" name="plan" id="plan-growth" value="growth" class="absolute h-0 w-0 appearance-none" checked /> | |
| <span aria-hidden="true" class="hidden absolute inset-0 border-2 border-green-500 bg-green-200 bg-opacity-10 rounded-lg"> | |
| <span class="absolute top-4 right-4 h-6 w-6 inline-flex items-center justify-center rounded-full bg-green-200"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-green-600"> | |
| <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /> | |
| </svg> | |
| </span> | |
| </span> | |
| </label> | |
| <label for="plan-business" class="relative flex flex-col bg-white p-5 rounded-lg shadow-md cursor-pointer"> | |
| <span class="font-semibold text-gray-500 leading-tight uppercase mb-3">Business</span> | |
| <span class="font-bold text-gray-900"> | |
| <span class="text-4xl">10</span> | |
| <span class="text-2xl uppercase">GB</span> | |
| </span> | |
| <span> | |
| <span class="text-xl font-bold text-gray-500">$</span> | |
| <span class="text-xl font-bold text-gray-900 -ml-1">15</span> | |
| <span class="text-xl font-semibold text-gray-500">/</span> | |
| <span class="text-lg font-semibold text-gray-500">mo</span> | |
| </span> | |
| <input type="radio" name="plan" id="plan-business" value="business" class="absolute h-0 w-0 appearance-none" /> | |
| <span aria-hidden="true" class="hidden absolute inset-0 border-2 border-green-500 bg-green-200 bg-opacity-10 rounded-lg"> | |
| <span class="absolute top-4 right-4 h-6 w-6 inline-flex items-center justify-center rounded-full bg-green-200"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-green-600"> | |
| <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /> | |
| </svg> | |
| </span> | |
| </span> | |
| </label> | |
| <label for="plan-enterprise" class="relative flex flex-col bg-white p-5 rounded-lg shadow-md cursor-pointer"> | |
| <span class="font-semibold text-gray-500 leading-tight uppercase mb-3">Enterprise</span> | |
| <span class="font-bold text-gray-900"> | |
| <span class="text-4xl">20</span> | |
| <span class="text-2xl uppercase">GB</span> | |
| </span> | |
| <span> | |
| <span class="text-xl font-bold text-gray-500">$</span> | |
| <span class="text-xl font-bold text-gray-900 -ml-1">20</span> | |
| <span class="text-xl font-semibold text-gray-500">/</span> | |
| <span class="text-lg font-semibold text-gray-500">mo</span> | |
| </span> | |
| <input type="radio" name="plan" id="plan-enterprise" value="enterprise" class="absolute h-0 w-0 appearance-none" /> | |
| <span aria-hidden="true" class="hidden absolute inset-0 border-2 border-green-500 bg-green-200 bg-opacity-10 rounded-lg"> | |
| <span class="absolute top-4 right-4 h-6 w-6 inline-flex items-center justify-center rounded-full bg-green-200"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-green-600"> | |
| <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /> | |
| </svg> | |
| </span> | |
| </span> | |
| </label> | |
| </div> | |
| </fieldset> | |
| </form> | |
| </body> |
This aims to recreate the radio group design shown by Steve Schoger over here: https://twitter.com/steveschoger/status/1024720091546562560/photo/1 so all credits to the design and inspiration to Steve.
It is part of their Refactoring UI book so I'd recommend checking it out: https://refactoringui.com/
A Pen by Azri Kahar on CodePen.
| input[type="radio"]:checked + span { | |
| display: block; | |
| } | |
| /* You can use @apply when moving this into your tailwind css file, like so */ | |
| /* | |
| input[type="radio"]:checked + span { | |
| @apply block; | |
| } | |
| */ |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet" /> |