JSFiddle - React, Tailwind, and code Playground

by shuja uddin

HTML

<div class="col-lg-12">
	<div class="row mb10 bggray">
		<div class="col-lg-6 mt10">
		<img src="logo.png" />
		</div>
		<div class="col-lg-6">
			<ul class="nav nav-pills pull-right">
 				<li role="presentation"><a href="#">Home</a></li>
  				<li role="presentation"><a href="#">Profile</a></li>
 				<li role="presentation"><a href="#">Messages</a></li>
			</ul>
		</div>
	</div>
	<div class="row">
		<div class="panel-group"  role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
	  <h4 class="panel-title mt54">
        
          Search
        
      </h4>
	  </a>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
  <div class="panel-body">
      	 <form action=""  method="post" id="VendorForm" data-role="validator" >
      		  <div class="row">
              <div class="col-lg-4 col-md-6">
                <div class="col-lg-6  col-md-6">
                <label for="Start Date and Time">Start Date and Time:</label>
              </div>
              <div class="col-lg-6 col-md-6">
                <input data-bind="value: startdate"  id="date1" placeholder="mm/dd/yyyy" style="width:150px;" pattern="(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d" required oninvalid="setCustomValidity('Plz enter date format MM/DD/YYYY')" onchange="try{setCustomValidity('')}catch(e){}"/>
              </div>
              <div class="col-lg-6  col-md-6">
                <label for="Entity Id">Entity Id:</label>
              </div>
              <div class="col-lg-6  col-md-6">
                 <input data-bind="value: 2345"  type="text" class="form-control" placeholder="Entity Id" pattern="[0-9]+" required oninvalid="setCustomValidity('Plz enter number')"...

CSS

body{
    font-family:arial;
	}
	.panel-heading>a{
	text-decoration:none;
	color:#333333;
	}
	.panel-heading>a:hover{
	color:#333333;
	text-decoration:underline;
	}
	::-webkit-input-placeholder { /* WebKit browsers */
     opacity: 0.5 !important;
	}
	:-moz-placeholder{
	opacity: 0.5 !important;
	}
	:-ms-input-placeholder {  
	opacity: 0.5 !important;
	}
	.mb10{
		margin-bottom: 10px;

	}
	.mt10{
		margin-top: 10px;

	}
	.bggray{
		background-color: #808285;
		
		border: 1px solid black;
	}
	.form-control{
		margin-bottom: 10px;
		max-width:180px;
	}
	.k-datepicker{
		margin-bottom: 10px;
		width:179px !important;
	}
	.nav-pills > li > a{
		color: #cbba4c;
	}
	
	
span.k-dropdown{
width: 182px;
}

JavaScript

$(document).ready(function() {
 
   // <!--View modal-->
    var vm = new AppViewModel();
        ko.applyBindings(new AppViewModel());
                // create DatePicker from input HTML element
              
                $("#date1").kendoDatePicker({
                    format: "MM/dd/yyyy"
                });
                $("#date2").kendoDatePicker({
                    format: "MM/dd/yyyy"
                });
                $("#date3").kendoDateTimePicker({
                    format: "yyyy/MM/dd hh:mm tt"
                });
                $("#inboundprocstatus").kendoDropDownList();

                
					$(".reset").click(function(){
					$("#date4 input").val('');
					});
               
                $("#grid").kendoGrid({
                        dataSource: {
                            data:vm.griddata(),
                            pageSize: 5
                        },
                        
                        groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true,
                            buttonCount: 5
                        },
                        columns: [{field: "integratorid",title: "IntegratorId",width: 40},
                        {field: "entityid",title: "EntityId",width: 40},
                        {field: "eventname",title: "Event Name",width: 100},
                        {field: "referenceid",title: "Reference Id",width: 100},
                        {field: "",template:"<input type='checkbox' class='check-box'/>",headerTemplate: '<label><input type=\'checkbox\' id=\'checkAll\'/></label>',width: 10
                        }]
                    });
                   
                        $('#checkAll').click(function() {  
                        if(this.checked) { 
                        $('.check-box').each(function() { 
                        this.checked = true;             ...