JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div id="container">
    <div id="header">TANGORA BEST PRACTICE ANALYZER</div>
         
    <div id="innercontainer">
    <p id="introtext">Run analysis to get suggestions for how to improve your website.</p> 
    <input type="button" value="Lastest run: #4 (today 3:34 PM)&#13;&#10;Click to run again" id="runbtn"/>
    <div class="clearfloats "></div>
      <div id="backtooverviewbtn">
       <a href="#">
           <span class="arrowhead"></span>
            <span class="button">To Overview</span>
        </a>        
     </div>
    <div class="clearfloats "></div>
        <h4 id="category">SEARCH ENGINE OPTIMIZATION</h4>
    <h3 id="title">Use Canonical Links</h3>
    <div id="prioritywrapper">
        <div id="priorityheader">PRIORITY:</div>
        <div id="newestpriority"><p>MEDIUM &ndash; run #4</p></div>
        <div id="oldpriority"><p><emph>HIGH &ndash; run #3</emph> (today 3:04 PM)</p></div>
    </div>
    <table>
         <tr>
             <th>9 SUGGESTIONS</th>
             <th colspan="2"><input type="checkbox" id="showignored"></input><label for="showignored">Show ignored (0)</label>
        </th>
        </tr>
        <tr>
        <th>Sites that would benefit from using canonical links
        </th>
            <th>Relative importance
        </th>
            <th>Ignore <a href="#">all</a>
        </th>
        </tr>
        <tr>
            <td><a href="#">Frezz (dansk)</a></td>
            <td><div class="relativeimportance no1"></div></td>
            <td><img src="http://agi.tangora.com/media/toggle-off.png"/></td>
        </tr>
         <tr>
            <td><a href="#">Frezz (english)</a></td>
                            <td><div class="relativeimportance no2"></div></td>
                <td><img src="http://agi.tangora.com/media/toggle-off.png"/></td>
        </tr>
         <tr>
            <td><a href="#">Intranet (dansk)</a></td>
                            <td><div class="relativeimportance no3"></div></td>
                <td><img...

CSS

body { font-family: Arial; font-size: 14px; }
h3#title { font-size: 22px; margin-bottom: 20px; }
h4#category { font-size: 10px; margin-top: 20px; color:#777; }
img { padding: 0; margin: 0; }
emph { font-weight:bold; }
.clearfloats { clear:both; }
label { margin-left: 4px; font-size 8px; }
input[type="button"]#runbtn { padding: 7px 10px; float:right; margin-top: 15px; background: #006600; border: 1px solid #006600; border-radius: 3px; color:White; }
#container { width: 470px; height: 500px; padding-top: 20px; margin: 20px auto; }
#header { background: #222; height: 30px; color: White; line-height:30px; font-weight:bold; padding-left: 10px; border-radius: 3px; }

.arrowhead { display: block; float: left; width: 0; height: 0; border:  15px solid transparent; border-right-color: #DDD; } 
.button { background: #DDD; height: 30px; display: block; width: 120px; float: left; border-radius: 0 3px 3px 0; vertical-align: center; }


#innercontainer { width: 465px; padding-left: 5px; }
#introtext { float: left; width: 240px; margin-top: 15px; }
#backtooverviewbtn { position:relative; left: -15px; }

#innercontainer #prioritywrapper { width: inherit; height: 22px;  }
#innercontainer #prioritywrapper div:first-child { width: 75px; float:left; }
#innercontainer #prioritywrapper div:not(:first-child) { width: 120px; float:left; font-weight:bold; padding-right: 10px; }
#innercontainer #prioritywrapper div:last-child { width: 240px; font-weight:normal; }
#innercontainer #prioritywrapper div:nth-child(3) { border-left: 2px solid #BFBFBF; color: #AAA; padding: 0 0 0 10px; }

table { border: 1px solid #999; border-radius: 3px; width: inherit;   }
table td, table th { padding: 5px 8px; vertical-align: top; }
table tr:nth-child(2n) { background: #EFEFEF; } 
table tr th { background: #E9E9E9; border-bottom: 1px solid #CCC; }
table tr:nth-child(2) th { }
table td:first-child { width: 50% }
table td:nth-child(2) { width: 40% }
table td:nth-child(3) { width: 10% }

table tr:first-child...