<!-- Meant to show how you make a pretty-ish radio button with tailwind, but use alpine to give it a little push so the rest of the component can be tailwind-responsiveness. 

https://codepen.io/JJBigThoughts/pen/OJbmZwo?editors=1001
-->
<!-- https://chasingcode.dev/blog/build-signup-form-with-alpinejs/ -->
<div x-data="{ selected: '' }">
  <div class="input_radio_button_component">
    <div :class="{'bg-blue-400 text-gray-700 ': selected == 'winter', 'bg-blue-300 text-gray-600': selected != 'winter'}" class="flex items-center
                 border border-transparent shadow-sm
                 border-gray-600
                 shadow
                text-sm leading-4 font-medium
        				text-gray-600
                rounded-md
                focus:outline-none focus:ring-2 focus:ring-offset-2
                bg-blue-300 hover:bg-blue-400  focus:ring-indigo-500
                whitespace-nowrap">

      <input x-on:click="selected = 'winter'" id="d1" type="radio" name="season" value="winter" class="" />

      <label for="d1" class="flex items-center cursor-pointer
		                w-full 
            		    py-2 pr-2
		                ">
        <span :class="{'bg-green-400': selected == 'winter', 'bg-gray-50': selected != 'winter'}" class="BeRadioCircle ml-1.5 w-4 h-4 inline-block -px-1 mr-1 rounded-full border border-grey"></span>
        Winter
      </label>
    </div>
  </div>
  <br>
  <divclass="input_radio_button_component">
    <div :class="{'bg-blue-400 text-gray-700 ': selected == 'spring', 'bg-blue-300 text-gray-600': selected != 'spring'}" class="flex items-center
                 border border-transparent shadow-sm
                 border-gray-600
                 shadow
                text-sm leading-4 font-medium
        				text-gray-600
                rounded-md
                focus:outline-none focus:ring-4 focus:ring-offset-2
                bg-blue-300 hover:bg-blue-400  focus:ring-indigo-500
                whitespace-nowrap">

      <input x-on:click="selected = 'spring'" id="d2" type="radio" name="season" value="spring" class="hidden2" />

      <label for="d2" class="flex items-center cursor-pointer
		                w-full
            		    py-2 pr-2
		                ">
        <span :class="{'bg-green-400': selected == 'spring', 'bg-gray-50': selected != 'spring'}" class="BeRadioCircle ml-1.5 w-4 h-4 inline-block -px-1 mr-1 rounded-full border border-grey"></span>
        Spring
      </label>
    </div>
</div>
</div>