JSFiddle - React, Tailwind, and code Playground

by srosengren

HTML

<div class="container">
    <input id="showitem1" type="radio" name="slide" checked />
    <input id="showitem2" type="radio" name="slide" />
    <input id="showitem3" type="radio" name="slide" />
    <div class="slide slide1"></div>
    <div class="slide slide2"></div>
    <div class="slide slide3"></div>
    <label for="showitem1"></label>
    <label for="showitem2"></label>
    <label for="showitem3"></label>
</div>

CSS

input[type="radio"] {
    width: 0.1px;
}
.container {
    position:relative;
    height: 200px;
    width: 400px;
    text-align: center;
}
label {
    display: inline-block;
    position:relative;
    top: 5px;
    margin: 5px;
    z-index: 1;
    height: 10px;
    width: 10px;
    cursor: pointer;
    border-radius: 50%;
    opacity: 0.8;
}
.slide {
    position:absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#showitem1:checked ~ .slide1 {
    background: #1BA1E2;
}
#showitem2:checked ~ .slide2 {
    background: #E51400;
}
#showitem3:checked ~ .slide3 {
    background:#AA00FF;
}
label[for="showitem1"] {
    background: #1BA1E2;
}
label[for="showitem2"] {
    background: #E51400;
}
label[for="showitem3"] {
    background: #AA00FF;
}
#showitem1:checked ~ label[for="showitem1"],#showitem2:checked ~ label[for="showitem2"],#showitem3:checked ~ label[for="showitem3"] {
    border:solid 1px black;
}