JSFiddle - React, Tailwind, and code Playground

by Gonzalo

HTML

/*
body {
        font-family: GEInspira, Arial, sans-serif; 
        }
/*	background:#f0f0f0; 
        margin: 0px auto; 
        margin-left:0px; 
        margin-right:0px;
        overflow: hidden;
*/
/* body { text-align: center; } */
/* body.modal-body {background:#000} */
/*
body p {font-size:12px; color:#646464; line-height:20px;}
body p em {color:#343434}
body p strong {color:#000}
body p em strong {color:#000; font-style:italic; }
body a {color:#888888; font-weight:normal;}
body checkbox {font-family:GEInspira; font-size:11;}
*/
/*
img {
        margin-left:0;
        margin-right:0;
        padding-left:0;
        padding-right:0;
}
*/



/*table tbody {
        height: 200px;
        overflow : auto;
}
*//*
table td {
        border:0; 
        border-style:solid; 
        border-right-color:#d0d0d0;
        border-right-width:0px;
        border-left-width:0px;
        font-family:GEInspira;
        font-size:11px;
        color:#999;
}
*/
/*table tr:hover td:hover{ color:#fff; }*/

/*
table th {
        background: url("../img/bg_headerGrid.png") repeat-x scroll 0 0 #E5E5E5;
        border: 0;
         border-style:solid; 
        border-right-width:0px;
        border-right-color:#d0d0d0;
        border-left-width:0px;
        color: #3a73b8;
        height:35px;
         font-family: Arial;
    font-size: 11px;
    height: 21px;
}

/*
.tbodyTable {
        overflow:auto;
        z-index: 29;
        height:auto;
        max-height: 250px;
}

.blueColumn {
        color:#3a73b8;
        text-align:right;
        padding-right: 12px;
         font-weight: bold;
}

.tableHeaders {
        z-index : 30;

}


.iconview { 
        background: url("../img/icon_view.png") no-repeat center;
                background-color: none;
                
}

.iconview:active { 
        background: url("../img/adjustButtonICON.png") no-repeat center;		
                background-color: none;		
}
*/
.parentAmount{
    font-family:GEInspiraL;
    font-weight:normal;
  ...

CSS

@font-face {
    font-family: 'GEInspira';
    src: url('fonts/GEInspiraPitch.ttf');
    src: url('fonts/ge-inspira-web-regular.eot'); /* IE9 compat modes*/
    src: local('GEInspira'),
        url('fonts/GEInspiraPitch.ttf') format('truetype'),
        url('fonts/ge-inspira-web-regular.eot?#') format('embedded-opentype'), /* IE 6-8 */
        url('fonts/ge-inspira-web-regular.woff') format('woff')/* IE9+, FF 3.6+, Chrome 4+, Safari 5.1+ */;
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GEInspira';
    src: url('fonts/GEInspiraPitchBold.ttf');
    src: url('fonts/ge-inspira-web-regular.eot'); /* IE9 compat modes*/
    src: local('GEInspira'),
        url('fonts/GEInspiraPitchBold.ttf') format('truetype'),
        url('fonts/ge-inspira-web-regular.eot?#') format('embedded-opentype'), /* IE 6-8 */
        url('fonts/ge-inspira-web-regular.woff') format('woff')/* IE9+, FF 3.6+, Chrome 4+, Safari 5.1+ */;
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'GEInspiraL';
    src: url('fonts/GEInspRg.TTF');
    src: url('fonts/ge-inspira-web-regular.eot'); /* IE9 compat modes*/
    src: local('GEInspira'),
        url('fonts/GEInspRg.TTF') format('truetype'),
        url('fonts/ge-inspira-web-regular.eot?#') format('embedded-opentype'), /* IE 6-8 */
        url('fonts/ge-inspira-web-regular.woff') format('woff')/* IE9+, FF 3.6+, Chrome 4+, Safari 5.1+ */;
    font-weight: lighter;
    font-style: normal;
}

/************************************************** COLUMNS **************************************************/
.columns:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .columns {height: 1%;}
.columns .col{ float:left; overflow:hidden; padding: 3px 0 0 0;}
.columns .last{ float:right; }
/************************************************** END . COLUMNS **************************************************/

/************************************************** TABLES...

JavaScript

@font-face {
    font-family: 'GEInspira';
    src: url('fonts/GEInspiraPitch.ttf');
    src: url('fonts/ge-inspira-web-regular.eot'); /* IE9 compat modes*/
    src: local('GEInspira'),
        url('fonts/GEInspiraPitch.ttf') format('truetype'),
        url('fonts/ge-inspira-web-regular.eot?#') format('embedded-opentype'), /* IE 6-8 */
        url('fonts/ge-inspira-web-regular.woff') format('woff')/* IE9+, FF 3.6+, Chrome 4+, Safari 5.1+ */;;
    font-weight: normal;
    font-style: normal;
}

.news{ margin: 0 0 10px 10px; }
.NewsR { float: left; font-size: 12px; margin: 16px 0 10px; padding: 0 0 0 18px; width: 62%; border-left: 1px solid #CDD7D7; }
.linkText a{ font-family:Arial; font-weight:normal; font-size:12px; color: #3B73B9 !important; text-decoration: underline; }
.noteText{ font-family:Arial; font-weight:normal; font-style:italic; font-size:11px; color: #5F7676; }
/*
#CompyInformation_CompanyDetails h3{
         position:absolute; 
        display:block;
        float:left;
}*/
.hGray{
    color: #5F7676;
}
.hGreen{
    color:#76B900;
}
#CompyInformation_CompanyDetails .iconGEPref{
    height:26px;
    width:auto;
    background: url('../img/icon_PreferredSupplier.png') no-repeat;
    text-indent: 32px;
    float: left;
    margin-left: 20px;
}
.headerContainers {	
    width: 98.5%;
    height:34px;
    font-family:GEInspiraL;
    font-weight:normal;
    font-size:34px;
    color: #475858;
    margin-bottom:16px;
}
.headerContentItems {
    margin-right: 6px;
    margin-top: 3px;
}
.AdditionalContainer{
    padding:14px;
    background: transparent url('../img/bg_additionalCont.png') repeat-x 0 top;
    border: 1px solid #CDD7D7;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    width: 29%;
    float: right;
    /*min-height:729px;*/
    /*margin: 0 0 34px 0;*/
}
.SelectedLocation{
    background: transparent url('../img/bg_additionalCont.png') repeat-x 0 top;
    border: 1px solid #CDD7D7;
    width: 33.1%;
   ...