JSFiddle - React, Tailwind, and code Playground

HTML

<div class="body">
  text
  <input type="radio" name="slide" class="slide_" id="slide1" checked>
  <input type="radio" name="slide" class="slide_" id="slide2">
  <input type="radio" name="slide" class="slide_" id="slide3">
  <div class="slidebg" data-id="1"></div>
  <div class="slidebg" data-id="2"></div>
  <div class="slidebg" data-id="3"></div>
  <div class="slider">
    <div class="slide slidebg" data-id="1">1</div>
    <div class="slide slidebg" data-id="2">2</div>
    <div class="slide slidebg" data-id="3">3</div>
    <div>
      <label for="slide1" class="slide_" data-id="1"></label>
      <label for="slide2" class="slide_" data-id="2"></label>
      <label for="slide3" class="slide_" data-id="3"></label>
    </div>
  </div>
  <div>text</div>
</div>

CSS

html,body{
  margin:0;
  height:100%;
}
.body{
  position:relative;
  min-height:100%;
  padding:0 10px;
}
input.slide_{
  position:absolute;
  margin:0;
  padding:0;
  width:0;
  height:0;
}
.slidebg{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
  display:none;
}
.slidebg[data-id="1"]{
  background:#0dd;
}
.slidebg[data-id="2"]{
  background:#d0d;
}
.slidebg[data-id="3"]{
  background:#dd0;
}
.slider{
  position:relative;
  height:100px;
  border:1px solid #bbb;
  background:#eee;
}
.slider div{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  text-align:center;
}
.slider div label{
  position:relative;
  display:inline-block;
  width:10px;
  border:1px solid #bbb;
  border-radius:100%;
  cursor:pointer;
}
.slider div label:hover{
  border:1px solid #999;
}
.slider div label:before{
  content:'';
  display: block;
  padding-top:100%;
}
.slide{
  top:0;
  background:#bbb;
  display:none;
  z-index:0;
}

input#slide1:checked ~ .slidebg[data-id="1"]{
  display:block;
}
input#slide2:checked ~ .slidebg[data-id="2"]{
  display:block;
}
input#slide3:checked ~ .slidebg[data-id="3"]{
  display:block;
}

input#slide1:checked ~ .slider .slide[data-id="1"]{
  display:block;
}
input#slide2:checked ~ .slider .slide[data-id="2"]{
  display:block;
}
input#slide3:checked ~ .slider .slide[data-id="3"]{
  display:block;
}

input#slide1:checked ~ .slider .slide_:not([data-id="1"]){
  background:#bbb;
}
input#slide2:checked ~ .slider .slide_:not([data-id="2"]){
  background:#bbb;
}
input#slide3:checked ~ .slider .slide_:not([data-id="3"]){
  background:#bbb;
}