JSFiddle - React, Tailwind, and code Playground

HTML

<div id="application">
    <section id="ages"> <a class="year20" href="#"><span></span></a>
 <a class="year19" href="#"><span></span></a>
 <a class="year18" href="#"><span></span></a>
 <a class="year17" href="#"><span></span></a>
 <a class="year16" href="#"><span></span></a>
 <a class="year15" href="#"><span></span></a>
 <a class="year14" href="#"><span></span></a>
 <a class="year13" href="#"><span></span></a>
 <a class="year12" href="#"><span></span></a>
 <a class="year11" href="#"><span></span></a>
 <a class="year10" href="#"><span></span></a>
 <a class="year9" href="#"><span></span></a>
 <a class="year8" href="#"><span></span></a>
 <a class="year7" href="#"><span></span></a>
 <a class="year6" href="#"><span></span></a>
 <a class="year5" href="#"><span></span></a>
 <a class="year4" href="#"><span></span></a>
 <a class="year3" href="#"><span></span></a>
 <a class="year2" href="#"><span></span></a>
 <a class="year1" href="#"><span></span></a>

    </section>
</div>

CSS

body {
    background-color: black;
    font-family: Verdana, sans-serif;
    font-size: 12px;
}
#application {
    width: 1000px;
    height: 800px;
    margin: 0px auto;
    position: relative;
}
#ages {
    width: 524px;
    height: 513px;
    position: absolute;
    left: 224px;
    top: 166px;
}
#ages > a {
    display: block;
    position: absolute;
    box-shadow: 0px 0px 1px 0px red;
}
#ages a span {
    position: absolute;
    display: block;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: -9999px -9999px;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
#ages > a:hover span, #ages > a.active span {
    background-position: center center;
}
#ages a.year20 {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
#ages a.year20 span {
    background-image: url('http://toms.somese.lv/test/assets/images/wood-layers/20.png');
}
#ages a.year19 {
    width: 498px;
    height: 489px;
    left: 14px;
    top: 10px;
}
#ages a.year19 span {
    background-image: url('http://toms.somese.lv/test/assets/images/wood-layers/19.png');
}
#ages a.year18 {
    width: 477px;
    height: 470px;
    left: 24px;
    top: 19px;
}
#ages a.year18 span {
    background-image: url('http://toms.somese.lv/test/assets/images/wood-layers/18.png');
}
#ages a.year17 {
    width: 455px;
    height: 449px;
    left: 37px;
    top: 27px;
}
#ages a.year17 span {
    background-image: url('http://toms.somese.lv/test/assets/images/wood-layers/17.png');
}
#ages a.year16 {
    width: 434px;
    height: 429px;
    left: 48px;
    top: 37px;
}
#ages a.year16 span {
    background-image: url('http://toms.somese.lv/test/assets/images/wood-layers/16.png');
}
#ages a.year15 {
    width: 413px;
    height: 412px;
    left: 59px;
    top: 44px;
}
#ages a.year15 span {
    background-image: url('http://toms.somese.lv/test/assets/images/wood-layers/15.png');
}
#ages a.year14 {
    width: 382px;
    height: 382px;
    left: 76px;
    top:...