JSFiddle - React, Tailwind, and code Playground

HTML

<div class="popup" id="popupF">

    <div id="topBar">
        <span class="pusher TB_nb"><h2>Sök efter ärende</h2>
        </span>
        <span id="close"><a href="javascript:void(0)"
            onclick="document.getElementById('popupF').style.display = 'none';">X</a>
        </span>
        </div>
<h2 class="pusher">Sök efter ärende</h2>
<div id="FVsok">

    <div
        style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;">
        <span
            onClick="getElementById('FsokF').style.display='', getElementById('FbottomA').style.display='none', getElementById('FbottomV').style.display='', getElementById('FVsok').style.display='none'"
            class="link_sm">Visa s&ouml;kformul&auml;r</span>
    </div>

</div>

<div id="FsokF">

    <div
        style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;; padding-bottom: 5px;">
        <span
            onClick="getElementById('FsokF').style.display='none', getElementById('FbottomA').style.display='none', getElementById('FbottomV').style.display='', getElementById('FVsok').style.display=''"
            class="link_sm">D&ouml;lj s&ouml;kformul&auml;r</span>
    </div>

    <div style="width: 100%; margin-left: 15px; margin-right: 80px;"
        class="fontS80">

        <div class="fl30">&nbsp;S&ouml;k efter ärende</div>
        <div class="clear"></div>
        <div class="fl30">
            <input type="text" size="60"
                name="searchArende">
        </div>
        <div class="clear"></div>

        <div class="fl30">
            <input type="button" value="Avbryt">
        </div>
        <div class="fl10">
            <input type="button" value="  S&ouml;k  "
                onclick="javascript:doSubmit('Arendesokning', 'search')">
        </div>
        <div class="clear">&nbsp;</div>
    </div>

</div>
<div style="width: 100%; margin-left: 15px; margin-right: 15px;">
    <table width="100%" border="0" cellspacing="0" cellpadding="4"
       ...

CSS

td {border:1px solid black}
#topBar {width:100%; background-color:#EFEFDC;}
#close {position:absolute; right:5px;}


*  {font-family:arial;}

.avnamn{ 
                color: #90002b; 
                font-size: 140%; 
                display: inline; 
                vertical-align: 3%; 
                margin-left: 1%;
                }

.b{border:1px solid #000;}

.readonly{background-color: #CCC;}

.Webdings{
    font-family: Webdings;
    }

ul{margin-top: 0px}

.mt3{margin-top:-3px;}
.mt5p{margin-top:5px;}

.fontS80 {font-size: 80%;} 
a:link{color:#000; text-decoration:none; }
a:visited{color:#000; text-decoration:none; }
a:hover{color:#000; text-decoration:none; }
a:active{color:#000; text-decoration:none; }

.fontS75 {font-size: 75%;} 

.link{color: #003366;
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;}

.link_sm{color: #003366;
    text-decoration: underline;
    cursor: pointer;}

.link_sm{font-size: 70%;cursor: pointer;}

.small{font-size: 75%;}

.smallg{font-size: 75%;
color: #555;}

.ssmall{
    font-size: 65%;
    font-weight: bold;
    color: #555;
}
.small60{font-size: 60%;}
.small50{
    font-size: 50%;
    color: #333;
}
.smallb{font-size: 85%;}
table{display:inline;}

h1{font-size: 130%;display:inline;}
h2{font-size: 100%;display:inline;}
h3{
    font-size: 80%;
    display:inline;
    font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif;
}
h4{font-size: 70%;display:inline;}
h5{
    font-size: 80%;
    display:inline;
    font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif;
}

.hthin{
    font-size: 125%;
}

.th {text-align: left;}

td, th{font-size: 75%;
    vertical-align: text-top;}
.td_link{cursor: pointer;}
.td40{height:40px;}
.td60{height:60px;}



.thkant{
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    font-size: 70%;
        text-align: left;
}

.labb{F0F0E3; c1c1b3 }

.bb{border-bottom: 1px solid #000;}
.bbV{border-bottom: 1px solid #FFF;}
.TB_nbA...