JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<div class="tg-formsection">
                <div class="tg-heading-border tg-small">
                    <h3>Add Clinic Business Hours</h3>
                </div>
                
											<input id="ChkSUN" type="checkbox" value="Sunday" runat="server" class="single sun option-input checkbox" name="days"/><span class="sun" style="font-size:20px;"> Sunday</span>
										</div>
							
                                        <div id="Sun" style="display:none;">
									<div class="col-md-5 col-sm-6 col-xs-12">
										<div class="form-group">
                                            <select ID="ddlSunStart" runat="server" class="form-control">
            <option value="0">Opens at</option>                                
                                                <option value="1:00">1:00</option>
<option value="1:30">1:30</option>
<option value="2:00">2:00</option>
<option value="2:30">2:30</option>
<option value="3:00">3:00</option>
<option value="3:30">3:30</option>
<option value="4:00">4:00</option>
<option value="4:30">4:30</option>
<option value="5:00">5:00</option>
<option value="5:30">5:30</option>
<option value="6:00">6:00</option>
<option value="6:30">6:30</option>
<option value="7:00">7:00</option>
<option value="7:30">7:30</option>
<option value="8:00" >8:00</option>
<option value="8:30">8:30</option>
<option value="9:00">9:00</option>
<option value="9:30">9:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
                                           </select> 
										</div>
									</div>
									<div class="col-md-5 col-sm-6 col-xs-12">
										<select ID="ddlSunEnd" runat="server" class="form-control">
                    <option value="0">Close at</option>
                                                <option value="1:00">1:00</option>
<option...

CSS

.option-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  top: 13.33333px;
  right: 0;
  bottom: 0;
  left: 0;
  height: 30px;
  width: 30px;
  transition: all 0.15s ease-out 0s;
  background: #cbd1d8;
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5rem;
  outline: none;
  position: relative;
  z-index: 1000;
}
.option-input:hover {
  background: #9faab7;
}
.option-input:checked {
  background: #40e0d0;
}
.option-input:checked::before {
  height: 30px;
  width: 30px;
  position: absolute;
  content: '✔';
  display: inline-block;
  font-size: 16.66667px;
  text-align: center;
  line-height: 30px;
}
.option-input:checked::after {
  -webkit-animation: click-wave 0.65s;
  -moz-animation: click-wave 0.65s;
  animation: click-wave 0.65s;
  background: #40e0d0;
  content: '';
  display: block;
  position: relative;
  z-index: 100;
}
.option-input.radio {
  border-radius: 50%;
}
.option-input.radio::after {
  border-radius: 50%;
}
select, .form-control, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    color: #999;
    width: 100%;
    height: 40px;
    outline: none;
    background: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    padding: 10px 15px;
    box-shadow: none;
    border-radius: 0;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #ddd;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

JavaScript

$('.sun').click(function () {
                $('#Sun').slideToggle("fast");
            });
              $('.mon').click(function () {
                $('#Mon').slideToggle("fast");
            });

$(document).ready(function(){
    $("#click").click(function(){
       var ChkSUN = $('#ChkSUN:checked').val();
       var ChkMON = $('#ChkMON:checked').val();
       var SunStart = $("#ddlSunStart option:selected").val();
       var SunEnd = $("#ddlSunEnd option:selected").val();
       var MonStart = $("#ddlMonStart option:selected").val();
       var MonEnd = $("#ddlMonEnd option:selected").val();
        alert("Day = " + ChkSUN +" Start Time and End Time  - " + SunStart + " " + SunEnd) ;
        
        alert("Day = " + ChkMON +" Start Time and End Time  - " + MonStart + " " + MonEnd) ;
    });
});