JSFiddle - React, Tailwind, and code Playground

by archana85

HTML

<div data-role="main" class="ui-content">
 <h5 id="date" allign=center> Date of Event : </h5> 
<ul class="wrapper">
<div>
    <li class="box1">
      <h5 align=left>Cattle</h5>
      <h5 align= center>ID </h5>
      <h6 align=right> Sahiwal</h6>
    </li>
    <li class="box2">
        <h5 align=left>Conductivity</h5>
        <h5 align= center>value</h5>
        <h6 aligh=center>Unit</h6>  
    </li>
    <li class="box3">
      <h5 align=left>weight<h5>
      <h5 align=center>Value<h5>
      <h6 aligh=right>Kg<h6>
   </li>
</div>
<div>
    <li class="box4">
      <h5 align=left>Temperature<h5>
      <h5 align=center>Value<h5>
      <h6 aligh=right>Celcius<h6>
    </li>
</div>
</ul>
</div>
<div data-role=footer>
    <button  id="milk" >Milksense</button>
    <button  id="fluid" >Fluidsense</button>
    <button  id="pedo" >Pedosense</button>
    <button  id="weight" >Weightsense</button>
<a href="#" class="ui-btn ui-btn-inline" onclick="logout()">Logout</a>
</div>

CSS

.ui-icon-searchfield::after {
    left: 173px !important;
}
.box1 {
    display: inline-block;
    position: relative;
    width: 42%;
    height: auto; 
    background: #F39;
    z-index: 0;
    margin: 2px 2px 2px -2px;
    transition: all .15s ease-in-out;
}
.box2 {
    display: inline-block;
    position: relative;
    width: 42%;
    height: auto; 
    background: #C0C0C0;
    z-index: 0;
    margin: 2px 2px 2px -2px;
    transition: all .15s ease-in-out;
}
.box3 {
    display: inline-block;
    position: relative;
    width: 42%;
    height: auto;  
    background: #0F0;
    z-index: 0;
    margin: 2px 2px 2px -2px;
    transition: all .15s ease-in-out;
}
.box4 {
    display: inline-block;
    position: relative;
    width: 42%;
    height: auto; 
    background: #F60;
    z-index: 0;
    margin: 2px 2px 2px -2px;
    transition: all .15s ease-in-out;
}