JSFiddle - React, Tailwind, and code Playground

HTML

<table class="mytable" id="cart" > 
    
    <tr id="titles"> 
        <th id="varekodetext">Varekode</th> 
        <th id="produkttext">Produkt</th> 
        <th id="pristext">Pris</th> 
        <th id="emptee">&nbsp;</th> 
        <th id="antalltext">Antall</th> 
        <th id="pristotaltext">Pris Total</th> 
        <th id="sletttext">Slett</th> 
    </tr> 
    <tbody> 
        
        
        <tr class="even first" id="topborder" height="40px"> 
            <td class="cart2Varekode">                    <span>39261-02 </span> 
            </td> 
            <td class="cart2Produkt">                     <a href="/Plantronics-CS361N.11" target="_blank" class="tooltip" title="Plantronics CS361N"> 
                Plantronics CS361N
                <span> 
                    <img src="http://www.euroworker.no/public/upload/productimage/220-353-2.jpg" alt="Plantronics CS361N" /> 
                    
                </span> 
                </a> 
                
                
                <p> 
                    
                </p> 
                
            </td> 
            <td class="cart2Price">
                
                
                <span class="actualPrice">2390.-</span> 
                
                
                
            </td> 
            <td class="cart2Salg"> 
                <span class="orderlistPrice"> 
                    
                </span> 
            </td> 
            <td class="antallbox"> 
                <span class="cartQuant"><input name="item_1363" class="DG-spinner" id="text" type="text" value="1"/> 
                    
                    <span class="cartUpdate"><button type="submit" class="submit" id="rfrsh_btn" name="saveFields" title="Oppdater" value="">&nbsp;</button></span> 
                </span> 
            </td> 
            
            
            <td class="cart2Total"> 
                
                <span class="basePrice">2390.-</span><span...

CSS

.cart2Produkt a:hover {
    
    background:#ffffff; 
    text-decoration:none;
    z-index: 999;
    
} 
/*BG color is a must for IE6*/

.tooltip 
{
    text-align:left;
}

.cart2Produkt a.tooltip span 
{
    z-index:999;
    display:block;
    position:absolute;
    left:-999px;
    opacity:0;
    padding:2px 3px; 
    margin-left:8px; 
    width:130px;
    -webkit-transition: opacity;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-duration: 500ms;
}

.cart2Produkt a.tooltip:hover span
{
    z-index:999;
    display:block; 
    position:absolute; 
    right:50%;
    opacity:1;
    background:#ffffff; 
    border:1px solid #cccccc; 
    color:#6c6c6c;
    top:-35px;
    left:-15px;
    z-index: 10;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    text-align:center;
    vertical-align:middle;
    padding:1px;
    -webkit-transition: opacity;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
    
}



/**************IGNORE BELOW*************/

#topborder
{
    /*border-top: 1px #ccc solid;*/
    padding-bottom:10px;
}

#topborder-tr
{
    border-top: 1px #ccc solid;
}

.mytable
{
    width:100%;
    margin-bottom:20px;
}

.mytable,
.mytable th,
.mytable tr,
.mytable td

{
    border: 0;
    letter-spacing: 1px;
    
}

.mytableborders,
.mytableborders th,
.mytableborders tr,
.mytableborders td

{
    border: 1px #ccc solid;
    /*width:670px;*/
}

.mytable td,
.mytable td span
{
    padding-bottom:0;
    padding-top:5px;
    /*border-top: 1px #ccc solid;*/
    vertical-align:middle;
    font-size:12px;
}

.mytable th
{
    vertical-align:bottom;
    height:30px;
    padding-bottom:5px;
}


#titles  {
    margin: 0px auto 0px auto;
    width: 100%;
    padding-bottom:50px;
    z-index:1;
    border: 1px #ccc solid;
    border-left: none;
    border-right: none;
}



.cart2Produkt a {
    color:#0a5692;
    text-decoration:none;
    line-height:15px;
   ...