JSFiddle - React, Tailwind, and code Playground

HTML

<div style="max-width:500px">
  <img class="mySlides" src="https://quibrianzanews.com/wp-content/uploads/2018/03/Palestra-Comunale_imagefull.jpg">
  <img class="mySlides" src="http://www.evolutionfit.it/img/templatearticoli/2016-giugno-crea-palestra.jpg">
  <img class="mySlides" src="http://2.citynews-today.stgy.ovh/~media/original-hi/63823591523150/palestra-5-6.jpg">
	<div class="rettangolo"></div>
    <div class="rettangolo"></div>
    <div class="rettangolo"></div>
</div>

CSS

.mySlides{	
    display:none;
    height:auto;
    width:500px;
}
.rettangolo 
{	
	width:15px;
	height:7px;
	background: #c4c4c4;
    margin: 10px 5px 0px 5px;
    float: right;
}

JavaScript

var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    var y = document.getElementsByClassName("rettangolo");
    for (i = 0; i < x.length; i++) 
    {
       x[i].style.display = "none";
       y[i].style.background = "#00CED1";   
    }
    
    myIndex++;
    if (myIndex > x.length) 
    {
    	myIndex = 1;
    }    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2000); // Change image every 2 seconds
}