forms
Tailwind CSS Radio
<div class="mx-auto space-y-3">
<div class="flex items-center space-x-2">
<input type="radio" id="example1" name="radioGroup1" class="h-4 w-4 rounded-full border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
<label for="example1" class="text-sm font-medium text-gray-700">Default</label>
</div>
<div class="flex items-center space-x-2">
<input type="radio" id="example2" checked name="radioGroup1" class="h-4 w-4 rounded-full border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
<label for="example2" class="text-sm font-medium text-gray-700">Checked</label>
</div>
</div>
<div class="mx-auto space-y-3">
<div class="flex items-center space-x-2">
<input type="radio" id="example4" disabled name="radioGroup2" class="h-4 w-4 rounded-full border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
<label for="example4" class="text-sm font-medium text-gray-700">Default</label>
</div>
<div class="flex items-center space-x-2">
<input type="radio" id="example5" checked disabled name="radioGroup2" class="h-4 w-4 rounded-full border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
<label for="example5" class="text-sm font-medium text-gray-700">Checked</label>
</div>
</div>
<div class="mx-auto space-y-2">
<div class="flex space-x-2">
<div class="flex h-5 items-center">
<input type="radio" id="example7" name="checkGroup3" checked class="h-4 w-4 rounded-full border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
</div>
<label for="example7" class="text-sm">
<div class="font-medium text-gray-700">Radio01</div>
<p class="text-gray-500">This is a help message.</p>
</label>
</div>
<div class="flex space-x-2">
<div class="flex h-5 items-center">
<input type="radio" id="example8" name="checkGroup3" class="h-4 w-4 rounded-full border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
</div>
<label for="example8" class="text-sm">
<div class="font-medium text-gray-700">Radio02</div>
<p class="text-gray-500">This is a help message.</p>
</label>
</div>
</div>
<div class="mx-auto max-w-xs">
<div class="flex items-center space-x-2 rounded p-2 hover:bg-gray-100">
<input type="radio" id="example9" name="checkGroup4" class="h-4 w-4 rounded-full border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
<label for="example9" class="flex w-full space-x-2 text-sm"> HTML </label>
</div>
<div class="flex items-center space-x-2 rounded p-2 hover:bg-gray-100">
<input type="radio" id="example10" name="checkGroup4" class="h-4 w-4 rounded-full border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
<label for="example10" class="flex w-full space-x-2 text-sm"> CSS </label>
</div>
<div class="flex items-center space-x-2 rounded p-2 hover:bg-gray-100">
<input type="radio" id="example11" name="checkGroup4" class="h-4 w-4 rounded-full border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
<label for="example11" class="flex w-full space-x-2 text-sm"> Javascript </label>
</div>
</div>
<div class="mx-auto max-w-xs">
<div class="divide-y divide-gray-200 border-y border-gray-200">
<div class="flex justify-between space-x-2 py-3">
<label for="example12" class="text-sm">
<div class="font-medium text-gray-700">Radio01</div>
<p class="text-gray-500">This is a help message.</p>
</label>
<div class="flex h-5 items-center">
<input type="radio" id="example12" name="checkGroup5" class="h-4 w-4 rounded-full border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
</div>
</div>
<div class="flex justify-between space-x-2 py-3">
<label for="example13" class="text-sm">
<div class="font-medium text-gray-700">Radio02</div>
<p class="text-gray-500">This is a help message.</p>
</label>
<div class="flex h-5 items-center">
<input type="radio" id="example13" name="checkGroup5" class="h-4 w-4 rounded-full border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
</div>
</div>
<div class="flex justify-between space-x-2 py-3">
<label for="example14" class="text-sm">
<div class="font-medium text-gray-700">Radio03</div>
<p class="text-gray-500">This is a help message.</p>
</label>
<div class="flex h-5 items-center">
<input type="radio" id="example14" name="checkGroup5" class="h-4 w-4 rounded-full border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
</div>
</div>
</div>
</div>