JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div id="container">
        
    <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">
                 <!--<img src="http://cdn1.iconfinder.com/data/icons/duesseldorf/16/settings.png" />-->
                 <p>
                     Analyze this again
                </p>
            </div>
             <div class="buttonhairline bottom">   
            </div> 
        </div>
    </div>        
   
        <div class="clearfloats"></div>
        


<div class="tablewrapper">
    <table>
         <tr>
             <th>HIGH PRIORITY<span class="custombullet"></span>7 SUGGESTIONS</th>
             <th><input type="checkbox" id="showignored" checked="checked"></input><label for="showignored">Show ignored (2)</label>
        </th>
        </tr>
        <tr>
        <th>Sites that would benefit from using canonical link
        </th>
            <th><span>Relative importance</span>
        </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 href="#">Intranet (dansk) </a></td>
                            <td><div class="relativeimportance no3"></div></td>

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

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 { 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; }

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

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

#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: #408C40; }

.buttonhairline { 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 { padding: 7px 10px; }
.mainbutton .mainbuttoncontentwrapper img { margin: 0 5px -4px 0;  }
.mainbutton .mainbuttoncontentwrapper p { display:inline-block; color:#FFF;  text-transform:uppercase; font-weight:bold; font-size: 12px; text-align: center; text-shadow: 1px 1px 0 #2A5B2A; line-height:16px; } 

.mainbutton:hover { background-color: #3FA63F;  }
.mainbutton:hover .buttonhairline.top, .mainbutton:hover .buttonhairline.bottom { background-color: #38C738;  }
.mainbutton:active { background-color:  #234D23; border-color: #234D23;  } 
.mainbutton:active .buttonhairline.top, .mainbutton:active .buttonhairline.bottom {  background-color: #234D23; } 

.mainbutton.disabled { background-color: #AAA; border: 2px solid #A7A7A7; }
.mainbutton.disabled .buttonhairline.top, .mainbutton.disabled...

JavaScript

$('#showignored').change(function() {
    $('#showignored').find("");  
});


/*$('#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");
});