JSFiddle - React, Tailwind, and code Playground

by Dejan Munjiza

HTML

<div class="halflife test">
    <div class="row-empty"></div>
    <div class="row">
        <a href="#" class="clickme">Click pl0x</a>
    </div>
    <div class="row">
        Test One
    </div>
    <div class="row">
        Test Two
    </div>
    <div class="row">
        Test Three
    </div>
    <div class="row">
        Test Four
    </div>
    <div class="row">
        Test Five
    </div>
</div>

CSS

body {
    background: white;
}

.halflife {
    width: 300px;
    float: left;
    background: #eee;
}

.row {
    width: 100%;
    float: left;
    padding: 10px;
    box-sizing: border-box;
    line-height: 20px;
    font-size: 12px;
    font-family: arial;
    border-top: 1px solid #888;
    border-left: 1px solid #888;
    border-right: 1px solid #888;
}

.row:last-child {
    border-bottom: 1px solid #888;
}

.row-empty {
    background: white;
    width: 100%;
    height: 30px;
}

.clickme {
    color: green;
    font-weight: bold;
}

JavaScript

$(function() {
    $('.clickme').click(function() {
        $('.row').css('backgroundColor', 'red');
        $('.row').css('borderBottom', '1px solid yellow');
    })
});