JSFiddle - React, Tailwind, and code Playground

by Ganesh Salunkhe

HTML

<ul id="myTab" class="nav nav-tabs">
        <li class="active"><a href="#Specifications" data-toggle="tab">Specifications</a></li>
        <li><a href="#Application" data-toggle="tab">Application</a></li>
		<li><a href="#Packing" data-toggle="tab">Packing</a></li>
      </ul>
<div id="myTabContent" class="tab-content">
        <div class="tab-pane active" id="Specifications">
          
         <table>
  <tbody><tr>
    <td><strong>Chemical Formula</strong></td>
  
    <td>CH<span class="style14">3</span>=C(CH<span class="style15">3</span>)COOCH<span class="style15">3</span></td>
  </tr>
  <tr>
    <td><strong>Colour (APHA)</strong></td>
   
    <td>10 max.</td>
  </tr>
  <tr>
    <td><strong>Specific Gravity @ 20°C</strong></td>
    
    <td>0.942 To 0.946</td>
  </tr>
  <tr>
    <td><strong>Acidity (as methcrylic acid)5</strong></td>

    <td>0.005 Max.</td>
  </tr>
  <tr>
    <td><strong>Purity % (G.C. Method)</strong></td>

    <td>99.6 Min.</td>
  </tr>
  <tr>
    <td><strong>Water (by Karl fisher)%</strong></td>
 
    <td>0.05 Max.</td>
  </tr>
  <tr>
    <td><strong>Inhibitor HQ</strong></td>

    <td>35 ppm</td>
  </tr>
 
</tbody></table>
        </div>
        <div class="tab-pane" id="Application">
          <hr class="vertical-space1">
		   <h5><strong>Application </strong></h5>
			<ul class="arrow magic">
				    <li>Semi-finished products like rods, tubes and sheets</li>
				    <li> Moulding and extrusion resins</li>
				    <li> Dental Prosthesis</li>
				    <li> Paints , Adhesives , Lacquers, Enamels and water proofing agent.</li>
				    <li> Textile Auxiliaries and sizing materials</li>
				    <li>Leather finishing resins</li>
				    <li> Polymer impregnated concrete</li>
				    <li>PVC modifiers</li>
				    <li>Addivite for lubricating and industrial oils</li>
			      </ul>
        </div>   

<div class="tab-pane" id="Packing">
          <hr class="vertical-space1">
		   <h5><strong>Packing </strong></h5>
			<ul class="arrow...

CSS

/* #Eelements + (Bootstrap)
	================================================== */
	
	/* Callout (Promo Box) */
	
	.callout { padding: 34px 0; min-height: 60px; margin: 8px 10px 30px; position: relative; clear: both; border-width: 2px 0; border-style: solid; border-color: #e5e5e5; }
	.callout h1, .callout h2, .callout h3 { font-weight: 400; }
	.callout a { text-decoration: underline; }
	.callout a.callurl { display: block; padding: 10px 30px; background: #fff; text-decoration: none; color: #363f46; border: 2px solid #e5e5e5; text-transform: uppercase; letter-spacing: 2px; margin: 4px 0 10px 15px; position: relative; float: right; border-radius: 3px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }
	.callout a.callurl:hover { border-color: #363f46; }
	.container .callout p { margin: 0; }
	.container div .callout { margin-left: 0; margin-right: 0; }
	
	
	/* Distance (Vertical Spaces) */
	
	.vertical-space, .vertical-space1, .vertical-space2, .vertical-space3, .vertical-space4, .vertical-space5 { display: block; width: 100%; margin: 0; clear: both; border: 0 none; height: 20px; }
	.vertical-space2 { height: 40px; }
	.vertical-space3 { height: 60px; }
	.vertical-space4 { height: 80px; }
	.vertical-space5 { height: 100px; }
	*+html hr.vertical-space, *+html hr.vertical-space1, *+html hr .vertical-space2, *+html hr.vertical-space3, *+html hr.vertical-space4, *+html hr.vertical-space5 { height: 0px; margin: 10px 0; background: #fff; border: 1px solid #fff; }
	*+html hr.vertical-space2 { margin: 20px 0; }
	*+html hr.vertical-space3 { margin: 30px 0; }
	*+html hr.vertical-space4 { margin: 40px 0; }
	*+html hr.vertical-space5 { margin: 50px 0; }
	
		
	/* TITLE */
	
	h4.subtitle { border-bottom: 1px solid #ff5656; font-family: 'Roboto', Helvetica, Arial; font-weight: 900; letter-spacing:1px; text-transform: uppercase; line-height: 2; padding-bottom:8px; font-size:...