JSFiddle - React, Tailwind, and code Playground

by hirenwebdp

HTML

<div id="products">
	<h1 id="ui-widget-header" class="ui-widget-header"><p align="center" style="font-size:20px;">DEPRECIATION EXPENSE</p> </h1>
	<div class="ui-widget-content">
        <ul>
            <li data-id="1" class="third" id="third"><a href="#" style="color:#FFFFFF;" class="button button-orange"> Loan $9,000 </a></li>
            <li data-id="2" class = "fourth" id="fourth" > <a href="#" style="color:#FFFFFF;" class="button button-green">Drawings $1,000</a> </li>
            <li data-id="3" class = "credit2" id="credit2"><a href="#" style="color:#FFFFFF;" class="button button-orange"> Interest expense $1,000</a> </li>
            <li data-id="4" id = "credit3"class="credit3"> <a href="#" style="color:#FFFFFF;" class="button button-green">Depreciation $400 </a></li>
            <li data-id="5" id = "credit4"class="credit4"> <a href="#" style="color:#FFFFFF;" class="button button-green">John’s Car Shop $3,000 </a></li>
            <li data-id="6" id = "credit5"class="credit5"> <a href="#" style="color:#FFFFFF;" class="button button-green">Cake Mix $3,000 </a></li>
            <li data-id="7" id = "credit6"class="credit6"> <a href="#" style="color:#FFFFFF;" class="button button-green">Accumulated depreciation $400 </a></li>
            
             <li data-id="8" id = "credit4"class="credit4"> <a href="#" style="color:#FFFFFF;" class="button button-green">Accumulated depreciation $400</a></li>
            <li data-id="9" id = "credit5"class="credit5"> <a href="#" style="color:#FFFFFF;" class="button button-green">Car $3,000 </a></li>
     
             <li data-id="10" class="third" id="third"><a href="#" style="color:#FFFFFF;" class="button button-orange">Sales $7,000 </a></li>
            <li data-id="11" class = "fourth" id="fourth" > <a href="#" style="color:#FFFFFF;" class="button button-green">Computer Asset $1,500</a> </li>
            <li data-id="12" class = "credit2" id="credit2"><a href="#" style="color:#FFFFFF;" class="button button-orange">...

CSS

#products{font: 13px/20px 'Lucida Grande', Verdana, sans-serif;
  color: #404040;
  background: #f2f8fc;}
.ui-widget-content ul li
{
    display: block;
	float: left;
	line-height: 30px;
	list-style:none;
	margin: 0 0px;
    text-decoration:blink;
}
.ui-widget-content
{
   min-height:90px;
    
}
.hidden{
    visibility:hidden;
}
#equal
{display:none;
}
#e1
{display:none;
}
.button-purple {
  background: #9966cb;
     color:#FFFFFF;
  border-color: #8040be #8040be #733aab;
  background-image: -webkit-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
  background-image: -moz-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
  background-image: -o-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
  background-image: linear-gradient(to bottom, #a87dd3, #9966cb 66%, #8f57c6);
}
.button-purple:active {
  background: #9966cb;
     color:#FFFFFF;
  border-color: #733aab #8040be #8040be;
}
.button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  height: 36px;
  line-height: 35px;
  padding: 0 20px;
  font-size: 20px;
  color:#FFFFFF;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
  background-clip: padding-box;
  border: 1px solid;
  border-radius: 2px;
  cursor: pointer;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
}
.button:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
     color:#FFFFFF;
  pointer-events: none;
  background-image: -webkit-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  background-image: -moz-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  background-image: -o-radial-gradient(center top, farthest-corner, rgba(255, 255,...