JSFiddle - React, Tailwind, and code Playground

by Dumine Stefan Daniel

HTML

<!DOCTYPE html>
<html>
<head>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
    <!--<title>Servers</title>-->
    <title>Servers</title>


    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">

    <script src='https://netdna.bootstrapcdn.com/bootstrap/4.1/js/bootstrap.min.js'></script>
    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>

    <link rel="stylesheet" type="text/css" href="scripts/servers.css">
    <script type="text/javascript" src="scripts/servers.js"></script>
    <script type="text/javascript" src="scripts/mindmup-editabletable.js"></script>

    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

     
<link id='favicon' rel='icon' type='image/png' href='res/favicon.png'>
</head>
<body>
     
    <div class='modal fade' id='modal_showInfo' role='dialog'>
        <div class='modal-dialog'>
            <div class='modal-content' id='modal_showInfo_content'>
                <div class='modal-header'>
                    <button class='close' data-dismiss='modal' id='modalClose1'> x </button>
                    <h3...

CSS

tbody tr:hover {
  background-color: #00A3E0;
  z-index: -1;
}

tbody tr:hover {
  background-color: #00A3E0;
  z-index: -1;
}



td:hover::before,
.row:hover::before,
.ff-fix:hover::before { 
    background-color: #00A3E0;
    content: '\00a0';  
    height: 100%;
    left: -5000px;
    position: absolute;  
    top: 0;
    width: 10000px;   
    z-index: -1;   
}
td:hover::after,
.col:hover::after,
.ff-fix:hover::after { 
    background-color: #00A3E0;
    content: '\00a0';  
    height: 10000px;    
    left: 0;
    position: absolute;  
    top: -5000px;
    width: 100%;
    z-index: -1;        
}

JavaScript

// whatever kind of mobile test you wanna do.
if (screen.width < 500) {
  
  $("body").addClass("nohover");
  $("td, th")
    .attr("tabindex", "1")
    .on("touchstart", function() {
      $(this).focus();
    });
  
}