JSFiddle - React, Tailwind, and code Playground

by Reddy Prasad Andhe

HTML

<div class="links">
    <a href="#" class="lb block-1">Highlight Block 1</a>
    <a href="#" class="lb block-2">Highlight Block 2</a>
    <a href="#" class="lb block-3">Highlight Block 3</a>
    <a href="#" class="lb block-4">Highlight Block 4</a>
    <a href="#" class="lb block-5">Highlight Block 5</a>
    <a href="#" class="lb block-6">Highlight Block 6</a>
</div>

<div class="highlight-block">
    <div class="cb block-1 active">This is Block 1</div>
    <div class="cb block-2">This is Block 2</div>
    <div class="cb block-3">This is Block 3</div>
    <div class="cb block-4">This is Block 4</div>
    <div class="cb block-5">This is Block 5</div>
    <div class="cb block-6">This is Block 6</div>
</div>

CSS

body{font-family:arial;font-size:12px;}
.links .lb{margin-left:5px;}
.highlight-block .cb{background:#eee;padding:10px;border:1px solid #666;margin:5px;}
.highlight-block .cb.active{background:#5cb85c;border-color:#1E6B1E;color:#fff;}

JavaScript

$(document).ready(function () {
    $('.links a').click(function () {
        $('.highlight-block').find('.cb').toggleClass('active');
    });
});