JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div id="container" class="showignoredoff">
        
    <div id="innercontainer">
    <!--<p id="introtext">Run analysis to get suggestions for how to improve your website.</p> 
    <input type="button" value="ANALYZE AGAIN" id="runbtn"/>-->
    
        <div id="headlinewrapper">
    <h4 id="category">SEARCH ENGINE OPTIMIZATION</h4>
    <h3 id="title">Use Canonical Links </h3>
        </div>
     <div id="mainbuttonwrapper">
        <div id="runanalysisbutton" class="mainbutton" >           
            <div class="buttonhairline top">   
            </div>
            
             <div class="mainbuttoncontentwrapper">
                <div class="progressindicator">
                </div>
                 <!--<img src="http://cdn1.iconfinder.com/data/icons/duesseldorf/16/settings.png" />-->
                 <p id="mainbuttonlabel">
                     Analyze this again
                </p>
            </div>

             <div class="buttonhairline bottom">   
            </div> 
        </div>
    </div>        
   
        <div class="clearfloats"></div>
        


<div class="tablewrapper">
    <table>
         <tr class="tableheaderrow">
             <th><span class="priorityresultline">HIGH PRIORITY<span class="custombullet"></span>9 SUGGESTIONS</span></th>
             <th><input type="checkbox" id="showignored" class="showignoredinputs"></input><label for="showignored" class="showignoredinputs">Show ignored (1)</label>
        </th>
        </tr>
        <tr class="tableheaderrow">
        <th>Sites that would benefit from using canonical links
        </th>
            <th><span>Relative importance</span>
        </th>
        </tr>
        <tr>
            <td><a href="#">Frezz (dansk)</a></td>
            <td><div class="relativeimportance no1"></div><input type="checkbox" class="ignoresuggestion"></input></td>

        </tr>
         <tr>
            <td><a href="#">Frezz (english)</a></td>
                            <td><div...

CSS

body { font-family: Arial; font-size: 14px; }
h3#title { font-size: 24px; margin-bottom: 12px; }
h4#category { font-size: 11px; margin-top: 20px; color:#999; font-weight: bold; }
img { padding: 0; margin: 0; }
emph { font-weight:bold; }
.clearfloats { clear:both; }
a { color: Black; text-decoration: none; }
label { display:none; margin-left: 4px; font-size 8px;  }
input[type="checkbox"] { display:none; }

#container { width: 800px; height: 910px; /*overflow-x:hidden; overflow-y:auto;*/  margin: 20px auto; border: 1px solid #000; }
#innercontainer { width: 600px; margin: 80px auto; }

#headlinewrapper { width: 440px; margin-top:-7px; float:left; }

#mainbuttonwrapper { height: 50px; float:right; }

#runanalysisbutton { float:right; margin: 16px 0 0 0; position:relative; width: 150px; }
.mainbutton { position:relative; border: 2px solid #408C40; background-color: #408C40; border-radius: 3px;  /* box-shadow: 0 1px 3px #2A5B2A; */ cursor:default;  }
.mainbutton.inprogress, .mainbutton.inprogress:hover { background-color: White; }


.buttonhairline { display:none; position:relative; width:inherit; border-radius: 3px; background-color: #3FA63F; height:1px;  }
.buttonhairline.top { top: 0; left: 0; }
.buttonhairline.bottom { bottom: 0; left: 0; }

.mainbutton .mainbuttoncontentwrapper { width: 130px; margin: 7px auto;}
.mainbutton .mainbuttoncontentwrapper img { position:relative; margin: 0 5px -4px 0;  }
.mainbutton .mainbuttoncontentwrapper p { position:relative; display:inline-block; color:#FFF;  text-transform:uppercase; font-weight:bold; /*background-color: #408C40;*/ font-size: 12px;
    /* text-shadow:
   -1px -1px 0 #2A5B2A,
    1px -1px 0 #2A5B2A,
    -1px 1px 0 #2A5B2A,
     1px 1px 0 #2A5B2A;*/ 
    line-height:16px; z-index:1000; border-radius: 3px; padding: 1px 3px 0 3px; } 


#mainbuttonwrapper .mainbutton .progressindicator { display:none; position:absolute; z-index: 2; left:0; top: 0; height:100%; width:100%; background-color: #408C40;...

JavaScript

$(".mainbutton").mouseenter( function() { 
    var labelBgColor = $(this).hasClass("inprogress") ? "#408C40" : "#3FA63F";   
     $(".mainbutton .mainbuttoncontentwrapper p").css("background-color", labelBgColor)   
        
});


$(".mainbutton").mouseleave( function() { 
     $(".mainbutton .mainbuttoncontentwrapper p").css("background-color","#408C40");
  
        
});

$('#runanalysisbutton').click(function() {
    $(".mainbutton").addClass("inprogress");
    $(".mainbutton:hover .mainbuttoncontentwrapper p").css("background-color","#408C40");
    $("#mainbuttonlabel").html("ANALYZING");
    $("#mainbuttonlabel").css("margin-left", "28px");
    
   var $prog = $(".progressindicator");
    $prog.animate({
      width: "show"
    },5000, function() { 

        
        $("#mainbuttonlabel").css("margin-left", "0"); 
        $("#mainbuttonlabel").html("ANALYZE THIS AGAIN");
        $(".progressindicator").hide();

        $(".mainbutton").removeClass("inprogress"); 
        if ($('.mainbutton').is(':hover')) {
            $(".mainbutton .mainbuttoncontentwrapper p").css("background-color","#3FA63F");
       }  
} );   
});


$('.showignoredinputs').mouseup(function() {
    if($("#showignored").is(":checked"))
    {
        $("#container").removeClass("showignoredon");
        $("#container").addClass("showignoredoff");
        $(".relativeimportance").show();
        $("input[type='checkbox'].ignoresuggestion").hide();
        $("table tr:nth-child(6) td:first-child").css("opacity", "1");
        $("table tr:nth-child(2) th:nth-child(2)").css("text-align", "left"); 
        $("table tr:nth-child(6)").slideUp("slow", "swing");


    }
    else
    {
        $("#container").addClass("showignoredon");
        $("#container").removeClass("showignoredoff");
        $(".relativeimportance").hide();
        $("table tr:nth-child(6) td:first-child").css("opacity", "0.3");
        $("table tr:nth-child(6)").slideDown("slow", "swing");
       ...