Tailwind radios

        
            
    <div class="flex justify-center">
      <div>
        <div class="form-check">
          <input class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
          <label class="form-check-label inline-block text-gray-800" for="flexRadioDefault1">
            Default radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
          <label class="form-check-label inline-block text-gray-800" for="flexRadioDefault2">
            Default checked radio
          </label>
        </div>
      </div>
    </div>
    
        
    

        
            
    <div class="flex justify-center">
      <div>
        <div class="form-check">
          <input class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
          <label class="form-check-label inline-block text-gray-800 opacity-50" for="flexRadioDisabled">
            Disabled radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled>
          <label class="form-check-label inline-block text-gray-800 opacity-50" for="flexRadioCheckedDisabled">
            Disabled checked radio
          </label>
        </div>
      </div>
    </div>
    
        
    

        
            
    <div class="flex justify-center">
      <div class="form-check form-check-inline">
        <input class="form-check-input form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
        <label class="form-check-label inline-block text-gray-800" for="inlineRadio10">1</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
        <label class="form-check-label inline-block text-gray-800" for="inlineRadio20">2</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
        <label class="form-check-label inline-block text-gray-800 opacity-50" for="inlineRadio30">3 (disabled)</label>
      </div>
    </div>
    
        
    

        
            
    <div class="flex justify-center">
      <div>
        <div class="form-check">
          <input class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 my-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="radio" name="flexRadioDefault" id="flexRadioDefault10">
        </div>
        <div class="form-check">
          <input class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 my-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="radio" name="flexRadioDefault" id="flexRadioDefault20" checked>
        </div>
      </div>
    </div>