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="ANALYZE AGAIN" id="runbtn"/>-->
    
        <div id="backtooverviewbtn">
       <a href="#">
           <span class="arrowhead"></span>
            <span class="button"></span>
        </a>        
     </div>
     <div id="mainbuttonwrapper">
        <div id="runanalysisbutton" class="mainbutton" >
            <div class="buttonhairline top">   
            </div>
            <div class="captionwrapper">
                <p>
                    Analyze
                </p>
                <!--<p>
                    Tjep tjep
                </p>
                <p>
                    may be outdated
                </p>-->
            </div>
             <div class="buttonhairline bottom">   
            </div>     
        </div>
    </div>        
        
    <div class="clearfloats "></div>
      

        
        <input type="button" value="click me"/>     
        

        <h4 id="category">SEARCH ENGINE OPTIMIZATION</h4>
    <h3 id="title">Use Canonical Links</h3>
<div class="tablewrapper">
    <table>
         <tr>
             <th>MEDIUM PRIORITY &bullet; 9 SUGGESTIONS</th>
             <th><!--<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>
        </tr>
        <tr>
            <td><a href="#">Frezz (dansk)</a></td>
            <td><div class="relativeimportance no1"></div></td>

        </tr>
         <tr>
            <td><a href="#">Frezz (english)</a></td>
                            <td><div class="relativeimportance no2"></div></td>

        </tr>
         <tr>
            <td><a...

CSS

body { font-family: Arial; font-size: 14px; }
h3#title { font-size: 20px; 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; }
label { margin-left: 4px; font-size 8px; }
input[type="button"]#runbtn { padding: 7px 10px; float:right; margin-top: 15px; background: #408C40; border-radius: 3px; color:White; border: 2px solid #2A5B2A; text-transform:uppercase; font-weight:bold; font-size: 12px; box-shadow: 0 1px 3px #999; text-shadow: 1px 1px 0 #2A5B2A; }

#mainbuttonwrapper { height: 50px; }

#runanalysisbutton { float:right; margin: 16px 0 0 0; }
.mainbutton { border: 2px solid #2A5B2A; border-radius: 3px;  /* box-shadow: 0 1px 3px #2A5B2A; */ cursor:default; background-color: #3FA63F;   }
.buttonhairline { position:relative;  height:1px; width:inherit;  border-radius: 3px; }
.buttonhairline.top { top: 0; left: 0; background-color: #50AF50; }
.buttonhairline.bottom { bottom: 0; left: 0; background-color: #489D48; }
.mainbutton .captionwrapper { padding: 7px 25px; }
.mainbutton .captionwrapper p { color:#FFF;  text-transform:uppercase; font-weight:bold; font-size: 12px; text-align: center; text-shadow: 1px 1px 0 #2A5B2A; } 

.pressed { background-color: #2A5B2A; font-size:11px; }

.mainbutton:hover { background-color: #408C40;  }
.mainbutton:hover .buttonhairline.top { background-color: #2A5B2A; }
.mainbutton:active { background-color: #408C40;/* #2A5B2A; */   } 
.mainbutton:active .captionwrapper p { /*box-shadow: inset 0 2px 2px #444;*/ } 
.mainbutton:active .buttonhairline.top { background-color: #2A5B2A; opacity:0.3; } 
.mainbutton:active .buttonhairline.bottom { background-color: #2A5B2A; opacity:0.3; /*#318731;*/ } 



#container { width: 470px; height: 400px; /*overflow-x:hidden; overflow-y:auto;*/ padding-top: 20px; margin: 20px auto; }
#header { background: #222; height: 28px; color: White; line-height:28px;...

JavaScript

/*$('#runanalysisbutton').mousedown(function() {
    $(this).find(".captionwrapper").addClass("pressed");
    $(this).find(".buttonhairline").hide();
    $(this).offset({ top: 86, left: 537 });
});
$('#runanalysisbutton').mouseup(function() {
    $(this).find(".captionwrapper").removeClass("pressed");
    $(this).find(".buttonhairline").show();
    $(this).offset({ top: 85, left: 537 });
  
});
$('#runanalysisbutton').mousedown(function() {
    $(this).find(".buttonhairline").addClass("pressed");
});
$('#runanalysisbutton').mouseout(function() {
    $(this).find(".buttonhairline").removeClass("pressed");
});
$('#runanalysisbutton').mouseup(function() {
    $(this).find(".buttonhairline").removeClass("pressed");
});*/

var sites = ["Frezz (dansk)","Frezz (english)","Frezz (english)", "Intranet (english)", "Frezz Organic Conference", "mobil.frezz.dk", "Partnercenter (english)", "Partnercenter (dansk)", "mobil100.frezz.dk"];


(function( $ ) {
  $.fn.rightClick = function(method) {
    $(this).bind('contextmenu rightclick', function(e){
        e.preventDefault();
        method();
        return false;
    })

  };
})( jQuery );

$('tr').rightClick(function(e){
    alert("no1");
});