JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://concorddentalde.com/wp-includes/js/jquery/jquery.js"></script>
<div class="hero"></div>

CSS

.hero {
	height:45%;
	height:45vh;
	min-height:400px;
	background-color:none;
	text-align:center;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:50% 50%;
	
}

JavaScript

$(document).ready(function(){
var urls = ['https://bit.ly/2G6vBPA',
	 'https://bit.ly/35LCgYb',
	 'https://bit.ly/2HGEcsW'];

	  var count = 1;
	  $('.hero').css('background-image', 'url("' + urls[0] + '")');
	  setInterval(function() {
	    $('.hero').css('background-image', 'url("' + urls[count] + '")');
	    count == urls.length-1 ? count = 0 : count++;
	  }, 6000);

	});