JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="javascript.js"></script>
<title>Страница</title>
</head>
<body>

<div class="wrapper">
<div class="wrapper-slider">

<input type="radio" id="btn-1" name="button1" checked>
<input type="radio" id="btn-2" name="button1">
<input type="radio" id="btn-3" name="button1">
<input type="radio" id="btn-4" name="button1">

<div class="labels-b">
<label class="label-b" for="btn-1"></label>
<label class="label-b" for="btn-2"></label>
<label class="label-b" for="btn-3"></label>
<label class="label-b" for="btn-4"></label>
</div>

<div class="slider">
<li class="slider-block-1"></li>
<li class="slider-block-2"></li>
<li class="slider-block-3">

<span class="block-buy">123</span>


</li>
<a href="https://mail.ru/"><li class="slider-block-4"></li></a>
</div>
</div>
</div>


</body>
</html>

CSS

* {
  margin: 0px;
  padding: 0px;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.wrapper {
  width: 1000px;
  height: 2000px;
  margin: 0px auto;
  background: yellow;
  
}
.wrapper-slider {
  overflow: hidden;
}
.slider {
  margin: 0px;
  padding: 0px;
  width: 4000px;
  height: 200px;
  overflow: hidden;
  transition: 0.3s;
  font-size: 0px;
}
.labels-b {
  display: block;
    text-align: center;
  background: none;
}
.label-b {
  width: 15px;
  height: 15px;
  border-radius: 35%;
  background: gray;
  display: inline-block;
  margin: 50px 15px 10px 15px;
  border: 4px solid green;
}
.label-b:hover {
  background: #fff;
  transition: 0.3s;
}
.wrapper input[type="radio"] {
  display: none;
}
.slider-block-1 {
  display: inline-block;
  width: 1000px;
  height: 200px;
  background: #B25757;
}
.slider-block-2 {
  display: inline-block;
  width: 1000px;
  height: 200px;
  background: none;
  background-image: url("images/1.jpg");
}
.slider-block-3 {
  display: inline-block;
  width: 1000px;
  height: 200px;
  background: #B2B257;
}
.slider-block-4 {
  display: inline-block;
  width: 1000px;
  height: 200px;
  background: #5764B2;
}
#btn-1:checked ~ .slider {
  transform: translateX(0px);
}
#btn-2:checked ~ .slider {
  transform: translateX(-1000px);
}
#btn-3:checked ~ .slider {
  transform: translateX(-2000px);
}
#btn-4:checked ~ .slider {
  transform: translateX(-3000px);
}
#btn-1:checked  ~ .labels-b  .label-b[for="btn-1"] {
  background: red;
}
#btn-2:checked  ~ .labels-b  .label-b[for="btn-2"] {
  background: red;	
}
#btn-3:checked  ~ .labels-b  .label-b[for="btn-3"] {
  background: red;
}
#btn-4:checked  ~ .labels-b  .label-b[for="btn-4"] {
  background: red;
}
#btn-1:checked  ~ .labels-b  .label-b[for="btn-1"],
#btn-2:checked  ~ .labels-b  .label-b[for="btn-2"],
#btn-3:checked  ~ .labels-b  .label-b[for="btn-3"],
#btn-4:checked  ~ .labels-b  .label-b[for="btn-4"] {
  transition: 0.3s;
}
.slider-block-3 .block-buy {
  position:...