JSFiddle - React, Tailwind, and code Playground

by Rejith R Krishnan

HTML

<p>
    <button>Turn slice yellow</button> <span>Click the button!</span>
</p>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

div {
     width: 40px;
     height: 40px;
     margin: 10px;
     float: left;
     border: 2px solid blue;
 }
 span {
     color: red;
     font-weight: bold;
 }
 button {
     margin: 5px;
 }

JavaScript

function colorEm() {
    var $div = $("div");
    var start = 0;
        $div.slice(start,16).css("background", "yellow");
        $div.slice(16).css("background", "red");
    }
}

$("button").click(colorEm);