JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<div class="dot-nav">
    <div class="dot sel" data-id="home" id="home-btn"></div>
    <div class="dot" data-id="about" id="about-btn"></div>
    <div class="dot" data-id="power" id="power-btn"></div>
</div>

CSS

.dot-nav {
    background:#000;
    padding:5px;
}

.dot {
    background:url('https://www.currintly.com/images/nav-ns.png') no-repeat;
    width:21px;
    height:21px;
    margin-bottom:10px;
}

.sel {
    background:url('https://www.currintly.com/images/nav-s.png') no-repeat;
}

JavaScript

$('.dot').click(function(){
    $('.sel').removeClass('sel');
    $(this).addClass('sel');
})