Tailwind Radio Button Generator

Create beautiful custom radio buttons with Tailwind CSS

Customization Options

Live Preview

Generated Code

class="w-5 h-5 text-blue-500 border border-gray-300 rounded-full hover:ring-2 hover:ring-offset-2 hover:ring-current focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-current checked:bg-current checked:border-transparent transition-all duration-300"

HTML Example

<div class="flex flex-row space-x-4">
    <div class="flex items-center">
        <input type="radio" name="radio-group" id="option1" checked 
            class="w-5 h-5 text-blue-500 border border-gray-300 rounded-full hover:ring-2 hover:ring-offset-2 hover:ring-current focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-current checked:bg-current checked:border-transparent transition-all duration-300">
        <label for="option1" class="ml-2 text-sm font-medium text-gray-700">Option 1</label>
    </div>
    <div class="flex items-center">
        <input type="radio" name="radio-group" id="option2" 
            class="w-5 h-5 text-blue-500 border border-gray-300 rounded-full hover:ring-2 hover:ring-offset-2 hover:ring-current focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-current checked:bg-current checked:border-transparent transition-all duration-300">
        <label for="option2" class="ml-2 text-sm font-medium text-gray-700">Option 2</label>
    </div>
</div>