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="resultslinecontainer">
<div class="priorityresultline"><span >HIGH PRIORITY</div>
<div class="showhideignoredtoggle"><input type="checkbox" id="showignored" class="showignoredinputs"></input><label for="showignored" class="showignoredinputs">Show ignored (<span class="numberofignoreddisplay">0</span>)</label>
</div>      
         <div class="clearfloats"></div>
        
    </div>
<div class="tablewrapper">
    <table id="suggestionslist">
         
        <tr class="tableheaderrow">
        <th><span class="numberofsuggestionsdisplay">9</span>Sites that would benefit from using canonical links
        <th></th>
            </th>
            <th><span>Relative importance</span>
        </th>
            
        <th><label for="ignorealltoggle">Ignorer</label><input type="checkbox" class="ignoresuggestion" id="ignorealltoggle"></input>
        </th>
        </tr>
        <tr>
      ...

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 { text-decoration: none; }
a.nolink { color: black; }
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

var numOfIgnored = 0;
var numOfSuggestions = 9;

$(".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");
        }
    });
});


$('#container').click(function() {
    $(".rightclickmenu").hide();
});

$('body').scroll(function() {
    $(".rightclickmenu").hide();
});




$('.showignoredinputs').mouseup(function() {
    if ($("#showignored").is(":checked")) {
        $("#container").removeClass("showignoredon");
        $("#container").addClass("showignoredoff");
        $("input[type='checkbox'].ignoresuggestion").hide();
        $("label").hide();


    }
    else {
        $("#container").addClass("showignoredon");
        $("#container").removeClass("showignoredoff");

        $("table#suggestionslist tr").show();
        $("label").show();
        $("input[type='checkbox'].ignoresuggestion").show();

          clearAllRowSelections();
    }
});


(function($) {
    $.fn.rightClick = function(method) {

        $(this).bind('contextmenu rightclick',...