JSFiddle - React, Tailwind, and code Playground

by Alexander Startsev

HTML

With borders:
<img src="http://placekitten.com/510/110" alt="lock links" width="510" height="110" usemap="#locks"/>
Without borders:
<img src="http://placekitten.com/510/110" alt="lock links" width="510" height="110" usemap="#locks-wb"/>

<map name="locks">
<area shape="circle" coords="52,52,43" href="#" alt="History" />
<area shape="circle" coords="155, 52, 43" href="#" alt="Enigma" />
<area shape="circle" coords="255, 52,43" href="#" alt="Algorithms" />
<area shape="circle" coords="355,52,43" href="#" alt="Single Key" />
<area shape="circle" coords="455,52,43" href="#" alt="Public Key"/>
</map>

<map name="locks-wb">
<area class="area-wb" shape="circle" coords="52,52,43" href="#" alt="History" />
<area class="area-wb" shape="circle" coords="155, 52, 43" href="#" alt="Enigma" />
<area class="area-wb" shape="circle" coords="255, 52,43" href="#" alt="Algorithms" />
<area class="area-wb" shape="circle" coords="355,52,43" href="#" alt="Single Key" />
<area class="area-wb" shape="circle" coords="455,52,43" href="#" alt="Public Key"/>
</map>

CSS

body{
    font: 400 14px/20px Helvetica, Arial, sans-serif;
    color: #000;
}

img{
    display: block;
    margin-bottom: 20px;
    
}

.area-wb{
    outline: none;
}