JSFiddle - React, Tailwind, and code Playground

by GCyrillus

HTML

<p>Float or reverse direction</p>
<ul>
    <li class="active">
        <a href="#">Item 1</a>
        <img src="http://cheap-kettlebells.com/w1.png" alt="">
    </li>
    <li>
        <a href="#">Item 2</a>
        <img src="http://cheap-kettlebells.com/w2.png" alt="">
    </li>
    <li>
        <a href="#">Item 3</a>
        <img src="http://cheap-kettlebells.com/w3.png" alt="">
    </li>
</ul>

CSS

body {
    padding: 50px;
}
ul {direction:rtl;
    background: url(http://cheap-kettlebells.com/w.png) no-repeat left top;
    border: 1px solid #444;
    display: inline-block;
    height: 301px;
    position: relative;
    width: 400px;
}
li {direction:ltr;
    font: bold 16px/100px sans-serif;
    height: 100px;
    width:99px;
}
a {
    border-left: 1px solid #444;
    border-top: 1px solid #444;
    color: red;
    display: block;
    text-align: center;
    text-decoration: none;
    width: 99px;
}
li:first-child a {
    border-top: none;
}
li:nth-child(2) a {
    color: blue;
}
li:nth-child(3) a {
    color: green;
}
a:hover {
    background: red;
    color: #fff;
}
li:nth-child(2) a:hover {
    background: blue;
    color: #fff;
}
li:nth-child(3) a:hover {
    background: green;
    color: #fff;
}
img {
    background: red;
    display: none;
    height: 301px;
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
}
li:nth-child(2) img {
    background: blue;
}
li:nth-child(3) img {
    background: green;
}
.active img, a:hover + img {
    display: block;
}