JSFiddle - React, Tailwind, and code Playground

HTML

<div class="home-banner" id="0" style="background: blue; opacity: 1;">
	<div class="title">Title 1</div>
	<div class="text">Description 1</div>
	<div class="button"><a href="#">READ MORE &gt;</a></div>

	<div class="dotbox">
		<span name="dot_0" onClick="activate_banner(0);" class="active">•</span>
		<span name="dot_1" onClick="activate_banner(1);">•</span>
		<span name="dot_2" onClick="activate_banner(2);">•</span>
	</div>
</div>

<div class="home-banner" id="1" style="background: red; opacity: 0; display: none;">
	<div class="title">Title 2</div>
	<div class="text">Description 2</div>
	<div class="button"><a href="#">READ MORE &gt;</a></div>

	<div class="dotbox">
		<span name="dot_0" onClick="activate_banner(0);">•</span>
		<span name="dot_1" onClick="activate_banner(1);" class="active">•</span>
		<span name="dot_2" onClick="activate_banner(2);">•</span>
	</div>
</div>

<div class="home-banner" id="2" style="background: green; opacity: 0; display: none;">
	<div class="title">Title 3</div>
	<div class="text">Description 3</div>
	<div class="button"><a href="#">READ MORE &gt;</a></div>

	<div class="dotbox">
		<span name="dot_0" onClick="activate_banner(0);">•</span>
		<span name="dot_1" onClick="activate_banner(1);">•</span>
		<span name="dot_2" onClick="activate_banner(2);" class="active">•</span>
	</div>
</div>

CSS

.home-banner {
	height: 269px;
	width: 100%;
	background: #000;

	position: absolute;
	top: 161px;

	font-family: Verdana,​Geneva,​sans-serif
}

	.home-banner .dotbox {
		width: 100px;
		height: 50px;

		margin-left: auto;
		margin-right: auto;
		text-align: center;

		font-family: Arial;
		font-size: 44px;
		color: #FFF;

		position: absolute;
		left: 0px;
		right: 0px;
		top: 220px;
	}

		.home-banner .dotbox span {
			display: inline-block;
			width: 10px;

			cursor: pointer;
		}

		.home-banner .dotbox .active {
			color: #003d4d
		}

	.home-banner .title {
		background-color: rgba(255, 255, 255, 0.2);
		color: rgb(0, 61, 77);
		font-size: 22px;

		padding: 20px;

		display: inline-block;

		margin-top: 30px;
		margin-left: 10px;
		margin-bottom: 1px;

		position: relative;
		left: 20%;
	}

	.home-banner .text {
		background-color: rgba(255, 255, 255, 0.2);
		color: rgb(0, 61, 77);
		font-size: 15px;
		line-height: 1.5;
		max-width: 30%;
		padding: 14px 20px;
		margin-left: 10px;

		position: relative;
		left: 20%;
	}

	.home-banner .button {
		background-color: #003d4d;
		color: #ffffff;
		cursor: pointer;
		display: inline-block;

		position: relative;
		left: 20%;
		margin-top: 9px;

		font-family: Verdana,​Geneva,​sans-serif;
		font-size: 12px;
		padding: 15px 20px;
		margin-left: 10px;
	}

		.home-banner .button:hover {
			background-color: #ffffff;
			color: #003d4d;
		}

		.home-banner .button a{
			color: inherit;
			text-decoration: none;
			display: block;

			width: 100%;
			height: 100%;
		}

JavaScript

//Animation detection
function whichTransitionEvent(el){
    var t;
    var transitions = {
      'transition':'transitionend',
      'OTransition':'oTransitionEnd',
      'MozTransition':'transitionend',
      'WebkitTransition':'webkitTransitionEnd'
    }

    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}

function activate_banner (banner_id) {
	var i = 0;
	var banner = document.getElementById(i);
	while (banner) {
		fadeOut(banner);
		banner = document.getElementById(++i);
	}

	fadeIn(document.getElementById(banner_id), 1);
}

function fadeOut(el){
	if (el.style.display == "none") return;

	el.style.transition = "opacity 0.5s linear 0s";
	el.style.opacity = 0;

	var transitionEvent = whichTransitionEvent(el);
	transitionEvent && el.addEventListener(transitionEvent, function() {
		el.style.display = "none";
	});
}

function fadeIn(el){
	el.style.display = "";
	el.style.transition = "opacity 0.5s linear 0s";
	el.style.opacity = 1;
}

function animation_loop() {
	setInterval(function(){
		var i = 0;
		var banner = document.getElementById(i);
		while (banner) {
			if (banner.style.opacity > 0) {
				// Found the active banner at i
				banner =  document.getElementById(++i);
				if (banner)
					activate_banner(i);
				else 
					activate_banner(0);
			}
			banner = document.getElementById(++i);
		}
	}, 10000);
}

// Begin the animation
animation_loop();