JSFiddle - React, Tailwind, and code Playground

by mirowin

HTML

<div class="slider">
    <input type="radio" name="slider__check" class="slider__check" id="slider__check-1" checked>
    <label for="slider__check-1" class="slider__label">1</label>
    <img src="http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9bfc9.jpg" alt="" class="slider__image">
    <input type="radio" name="slider__check" class="slider__check" id="slider__check-2">
    <label for="slider__check-2" class="slider__label">2</label>
    <img src="http://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg" alt="" class="slider__image">
    <input type="radio" name="slider__check" class="slider__check" id="slider__check-3">
    <label for="slider__check-3" class="slider__label">3</label>
    <img src="http://habrastorage.org/files/663/6b1/d4f/6636b1d4f8e643d29eab8c192fc1cea3.jpg" alt="" class="slider__image">
    <input type="radio" name="slider__check" class="slider__check" id="slider__check-4">
    <label for="slider__check-4" class="slider__label">4</label>
    <img src="http://habrastorage.org/files/e59/424/c04/e59424c046be4dab897d84ab015c87ea.jpg" alt="" class="slider__image">
    <input type="radio" name="slider__check" class="slider__check" id="slider__check-5">
    <label for="slider__check-5" class="slider__label">5</label>
    <img src="http://habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg" alt="" class="slider__image">
</div>

CSS

.slider {
    position:relative;
    width:700px;
    padding-top:370px;
    text-align:center;
}
.slider__check {
    position:absolute;
    clip:rect(0 0 0 0);
    overflow:hidden;
}
.slider__image {
    position:absolute;
    top:0;
    left:0;
}
.slider__label {
    overflow:hidden;
    display:inline-block;
    width:20px;
    height:20px;
    background:#069;
    border-radius:50%;
    text-indent:-9999px;
}
/* Display */
 .slider__image {
    display:none;
}
.slider__check:checked + .slider__label + .slider__image {
    display:block;
}
/* Current */
 .slider__check:checked + .slider__label {
    background:#C00;
}