JSFiddle - React, Tailwind, and code Playground

by dev_hope

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="form-group">
    		<label for="datepicker">Expire Date</label>
    		<div class="form-group">
    			<div class="input-group date-select-with-expire-option">
    				<div class="input-group-prepend">
    					<span class="input-group-text"> <i
    						class="far fa-calendar-alt"></i>
    					</span>
    				</div>
    				<input type="text" class="form-control date-input"
    					name="SelectedDate" placeholder="Select date" />
    				<div class="input-group-append">
    					<div class="input-group-text">
    						<div class="custom-control custom-checkbox">
    							<input type="checkbox" class="custom-control-input expire-option"
    								name="DateNeverExpires" id="never-expired"> <label
    								class="custom-control-label" for="never-expired"> Never
    								expires </label>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>

CSS

/*input field css https://www.w3schools.com/css/tryit.asp?filename=trycss_forms*/
  input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  
  /* margin: 8px 0; */
  
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.form-bg {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
/*input field css ended*/