JSFiddle - React, Tailwind, and code Playground

by Kate Masiuk

HTML

<div class="common">
    <div class="nav1"></div>
    <div class="nav2" id="active"></div>
    <div class="nav3"></div>
    <div class="nav4"></div>
    <div class="nav5"></div>
</div> 
<img src="http://htmlbook.ru/files/river.jpg">

CSS

.nav1, .nav2, .nav3, .nav4, .nav5 {
    position: absolute;
    border: 2px solid #fff;
    height: 10px;
    width: 10px;
    border-radius: 15px;
    box-shadow: 
        inset 10px 0 0 0 #000;    
}

.nav1 {margin: 349px 0 0 305px;}

.nav2 {margin: 349px 0 0 280px;}
.nav3 {margin: 349px 0 0 255px;}
.nav4 {margin: 349px 0 0 330px;}
.nav5 {margin: 349px 0 0 355px;}

div#active {
    box-shadow: 
        inset 10px 0 0 0 #DF0101,
        0px 0px 6px 2px #fff;
    cursor: default;    
}

div.nav1:hover, div.nav2:hover, div.nav3:hover, div.nav4:hover, div.nav5:hover {
    box-shadow: 
        inset 10px 0 0 0 #DF0101,
        0px 0px 6px 2px #fff; 
        cursor: pointer;    
}