JSFiddle - React, Tailwind, and code Playground

by Fernando Leal

HTML

<div class="andar">
    1° andar
</div>
<div class="andar">
    2° andar
</div>
<div class="andar">
    3° andar
</div>
<div class="andar">
    4° andar
</div>
<div class="andar">
    5° andar
</div>
<div class="andar">
    6° andar
</div>

CSS

div.andar {
    background: #55ADFF;
    margin: 1px;
    height: 25px;
    width: 100px;
    -webkit-box-shadow: inset -25px 0 0 0 #4083BF;
    box-shadow: inset -25px 0 0 0 #4083BF;
}
div.andar:hover {
    color: #FFFFFF;
    background: #1F3779;
    -webkit-box-shadow: inset -25px 0 0 0 #1F3779;
    box-shadow: inset -25px 0 0 0 #1F3779;
}