JSFiddle - React, Tailwind, and code Playground

by salitrapraveen

HTML

<div class="inside">
    <div class="gradient new">New</div>
    <div class="data">
    <table>
        <tr class="subject"><td node="1">row1</td></tr>
        <tr class="subject"><td node="2">row2</td></tr>
            <tr class="subject"><td node="1">row1</td></tr>
        <tr class="subject"><td node="2">row2</td></tr>
                <tr class="subject"><td node="1">row1</td></tr>
        <tr class="subject"><td node="2">row2</td></tr>
                <tr class="subject"><td node="1">row1</td></tr>
        <tr class="subject"><td node="2">row2</td></tr>
    </table>
</div>
</div>

CSS

.inside {
    overflow-y:auto;
}
.inside table{
    width:100%;

}

.data{
    
height:200px;
    overflow:auto;
}

.new{
    width:100%;
    cursor: pointer;
    text-shadow: 1px 1px 3px #000;
    color: white;
    background: #299a0b;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI5OWEwYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyOTlhMGIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #299a0b 0%, #299a0b 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#299a0b), color-stop(100%,#299a0b));
    background: -webkit-linear-gradient(top,  #299a0b 0%,#299a0b 100%);
    background: -o-linear-gradient(top,  #299a0b 0%,#299a0b 100%);
    background: -ms-linear-gradient(top,  #299a0b 0%,#299a0b 100%);
    background: linear-gradient(top,  #299a0b 0%,#299a0b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#299a0b', endColorstr='#299a0b',GradientType=0 );
        padding:15px 0 15px 0;
    
    text-align: center;
    font-size: 1.2em;
    border-bottom: 1px solid #666;
}

.inside table tr{
    width:100%;
    cursor: pointer;

}

.inside table tr td{
    padding:15px 0 15px 0;
    
    text-align: center;
    font-size: 1.2em;
    border-bottom: 1px solid #666;
}


.selected{
    background-color: #777;
    text-shadow: 1px 1px 3px #000;
    color: white;

}

JavaScript

$(document).ready(function() {
    $(".new").click(function() {
        $('<tr />').addClass('subject').append(
        $('<td />').text('new row')).prependTo('.inside table');
    });
$(".subject").live('click',function(event) {
    if(event.ctrlKey) {
          $(this).toggleClass('selected');  
    } else {
          $(".subject").removeClass("selected");
          $(this).addClass("selected");           
    }
});
});