JSFiddle - React, Tailwind, and code Playground
HTML
<div class="slider">
<input type="radio" id="btn-1" name="toggle" checked="">
<input type="radio" id="btn-2" name="toggle">
<input type="radio" id="btn-3" name="toggle">
<div class="slider-controls">
<label for="btn-1"></label>
<label for="btn-2"></label>
<label for="btn-3"></label>
</div>
<div class="slides">
<div class="slide">
<div class="slide-text">
<div class="slide-title">Долго, дорого, скрупулезно</div>
<p>
Математически выверенный дизайн<br>
для вашего сайта или мобильного приложения.
</p>
<a class="btn" href="#">Узнать больше</a>
</div>
</div>
<div class="slide">
<div class="slide-text">
<div class="slide-title">Дорого, скрупулезно</div>
<p>
Математически выверенный дизайн<br>
для вашего сайта или мобильного приложения.
</p>
<a class="btn" href="#">Узнать больше</a>
</div>
</div>
<div class="slide">
<div class="slide-text">
<div class="slide-title">Скрупулезно</div>
<p>
Математически выверенный дизайн<br>
для вашего сайта или мобильного приложения.
</p>
<a class="btn" href="#">Узнать больше</a>
</div>
</div>
</div>
</div>
CSS
body {
background: lightblue;
}
.slider{
position:relative;
width:880px;
height:310px;
margin:0 auto;
margin-top: 35px;
}
.slider input[type=radio] {
position:absolute;
opacity:0;
}
.slider-controls{
position:absolute;
bottom:95px;
left:49%;
width:200px;
height:10px;
margin-left:-100px;
text-align:center;
z-index:1000;
}
.slider-controls label{
display:inline-block;
width:4px;
height:4px;
margin:0 3px;
background:white;
border:3px solid white;
vertical-align:top;
border-radius:50%;
cursor:pointer;
}
#btn-1:checked ~ .slider-controls label[for="btn-1"],
#btn-2:checked ~ .slider-controls label[for="btn-2"],
#btn-3:checked ~ .slider-controls label[for="btn-3"] {
background:#c1c1c1;
}
.slide{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
}
.slide-text{
width:380px;
padding:30px 0;
color:#283136;
}
.slide-title{
font-size:36px;
line-height: 36px;
font-weight:bold;
color:black;
margin-bottom: 15px;
}
.slide-text p{
line-height:22px;
letter-spacing: 1px;
margin-top: 18px;
}
.slide .btn{
display:block;
width:240px;
padding:5px 0;
margin-top:25px;
font-size:12px;
color:white;
text-transform:uppercase;
text-align:center;
text-decoration:none;
background:#fb565a;
border-radius:3px;
}
.slide:nth-child(1){
background-image:url("http://allnet.16mb.com/nerds/img/slider-1.png");
background-repeat:no-repeat;
background-position:100% 10px;
}
.slide:nth-child(2){
background-image:url("http://allnet.16mb.com/nerds/img/slider-2.png");
background-repeat:no-repeat;
background-position:100% 10px;
}
.slide:nth-child(3){
background-image:url("http://allnet.16mb.com/nerds/img/slider-3.png");
background-repeat:no-repeat;
background-position:100% 0;
}
.slide{
display:none;
}
#btn-1:checked ~ .slides...