JSFiddle - React, Tailwind, and code Playground

by merindema

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">	
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
	<link rel="stylesheet" href="js_style.css" />
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
	<script src="lesson22.js"></script>
</head>
<body>
	<header id="header_id">
		<div class="container">
			<div class="row text_center">
				<div class="col-lg-12">
					<h2>Lesson 22 - Slider</h2>
					<input type="button" id='btn_22' value='Запуск' onclick="MySlide()">
				</div>
			</div>
		</div>
	</header>
	<div id="slider">
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-lg-8">
					<div class="slider_class text_center">	
						<span id="slide-1">1</span>
						<span id="slide-2">2</span>
						<span id="slide-3">3</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

CSS

.text_center{
  text-align: center;
}
#header_id{
  margin-bottom: 20px;
}

#btn_22{
  font-family: 'HelveticaRoman';
  font-size: 15px;
  padding: 5px 15px;
  border: 2px solid black;
  background: space;
  border-radius: 5px;
}

#btn_22:hover{
  background: pink; 
  transition: .5s;  
}

#slider span{
  color: black;
}

JavaScript

window.onload = function(){
    var slideOne = document.getElementById('slide-1');
    var slideTwo = document.getElementById('slide-2');
    var slideThree = document.getElementById('slide-3');

    // setInterval
}