JSFiddle - React, Tailwind, and code Playground

by lasha

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.6.0/less.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.13.3/jquery.tablesorter.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.13.3/jquery.metadata.js"></script>
<div class="container">
    <div class="sidebar">
        <ul class="sidebar-menu">
            <li>Dashboard</li>
            <li>Servers</li>
            <li>Storage</li>
            <li>Backups</li>
            <li>Restore</li>
            <li>Jobs</li>
            <li>Alerts</li>
            <li>Reports</li>
        </ul>
    </div>
    <div class="table-data">
         <h4>Jobs</h4>
 <span>Lorem ipsum dolor sit amet dolor amer sit lorem ipsum dolor.</span>
        <hr/>
        
        <span class="action-suspend">Suspend</span>
        <span class="action-resume">Resume</span>
        <span class="action-kill">Kill</span>
        
        
        <table class="tg-table-light">
  <thead>
  <tr>
    <th><input type="checkbox" class="input"></th>
    <th>Job ID</th>
    <th>Operation</th>
    <th>Client Content</th>
    <th>Agent Type</th>
    <th>Subclient</th>
    <th>Type</th>
    <th>Status</th>
    <th>Progress</th>
  </tr>
</thead>
<tbody>
  <tr class="header-row">
    <td><input class="input-sub"type="checkbox"></td>
    <td>2243521</td>
    <td>Backup</td>
    <td>vsa-proxy2</td>
    <td>Virtual Server</td>
    <td>default</td>
    <td>Full</td>
    <td class="job-status status-running"><span>running</span></td>
    <td class="bar">15%</td>
  </tr>
  <tr>
    <td><input class="input-sub" type="checkbox"></td>
    <td>2243522</td>
    <td>Backup</td>
    <td>vsa-proxy2</td>
    <td>Virtual Server</td>
    <td>default</td>
    <td>Full</td>
    <td class="job-status status-running"><span>running</span></td>
    <td class="bar">25%</td>
  </tr>
  <tr>
    <td><input class="input-sub" type="checkbox"></td>
    <td>2243523</td>
    <td>Backup</td>
   ...

CSS

* { 
   -webkit-box-sizing: border-box; 
   -moz-box-sizing:    border-box; 
   box-sizing:         border-box; 
}
body {
    font-family: sans-serif;
}
ul, li {
    margin: 0; padding: 0; list-style: none;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0; padding: 0;
}

@colorGray: #555;
.clear-all() {
	*zoom: 1;
	&:before,
	&:after {
		display: table;
		content: "";
	}
	&:after {
		clear: both;
	}
}

.container {
    border: 1px solid lighten(@colorGray, 30%);
    border-radius: 4px;
    background-color: lighten(@colorGray, 65%);
    .clear-all();
    padding: 15px;
    margin: 15px;
    min-width: 945px;
}

.sidebar {
    /* display: none; */
    float: left;
    width: 205px;
    height: 800px;
    border: 1px solid lighten(@colorGray, 30%);
    border-radius: 4px;
    background: #fff;
}

/* .sidebar */ .sidebar-menu {
    li {
        height: 40px;
        line-height: 2.8;
        border-bottom: 1px solid lighten(@colorGray, 40%);
        padding: 0 0 0 20px;
        cursor: pointer;
        
        &:hover {
            background-color: lighten(@colorGray, 60%)
        }
    }
}

.action-suspend, .action-resume, .action-kill {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    &:hover {
        color: lighten(@colorGray, 40%);
    }
}

.table-data {
    float: left;
    margin: 0 0 0 25px;
    
    h4 { margin: 20px 0 10px; font-weight: bold; }
    table {
        font-size: 12px;
    }
}

/* -------- TABLE STYLES -------- */
.tg-table-light { border-collapse: collapse; border-spacing: 0; /*border-radius: 4px; overflow: hidden;*/ }
.tg-table-light td, .tg-table-light th { background-color: #fff; border: 1px #bbb solid; color: #333; font-family: sans-serif; font-size: 100%; padding: 7px 10px; vertical-align: top; }
.tg-table-light .tg-even td  { background-color: #eee; }
.tg-table-light th  { background-color: #ddd; color: #333; font-size: 110%; font-weight: bold; }
.tg-table-light tr:hover td, .tg-table-light...

JavaScript

// Step 1: Select the style element and change it to text/less
$('head style[type="text/css"]').attr('type', 'text/less');

// Step 2: Tell LESS to refresh the styles
less.refreshStyles();

$(".tg-table-light").tablesorter({ 
        headers: { 
            0: { 
                sorter: false 
            }
        },
        textExtraction: "simple"
    }); 
var toggleState = false;
$(".input").on("change", function(e){
    var $this = $(this);
    if(!toggleState){
        $(".input-sub").prop('checked', 'checked');
        $(".input-sub").eq(0).trigger('change');
        toggleState = true;
    } else {
        $(".input-sub").prop('checked', '');
        $(".input-sub").eq(0).trigger('change');
        toggleState = false;
    }
});

$(".action-suspend").on("click", function(e){
    var $this = $(this);
    $(".input-sub:checked")
        .parent().parent().find(".job-status")
        .removeClass("status-running status-pending status-waiting")
        .addClass("status-waiting");
});

$(".action-resume").on("click", function(e){
    var $this = $(this);
    var $statusEl = $(".input-sub:checked").parent().parent().find(".job-status");
    
    $statusEl.each(function(i, el){
        var $this = $(this);
        if(!$this.hasClass("status-running") && !$this.hasClass("status-finished")){
            $this.removeClass("status-running status-pending status-waiting")
                .addClass("status-pending");
            setTimeout(function(){
                $this.removeClass("status-pending").addClass("status-running");
            },1000);
        }
    });
});

$(".action-kill").on("click", function(e){
    var $this = $(this);
    var $statusEl = $(".input-sub:checked").parent().parent().find(".job-status");
    
    $statusEl.each(function(i, el){
        var $this = $(this);
        if(!$this.hasClass("status-finished")){
        $this.removeClass("status-running status-pending status-waiting status-finished")
        .addClass("status-finished");
   ...