JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	
<title>dots sample</title>
<body>

<div class="container">
  <div class="content">
    <div class="main">
        <div id="screenshot">
			<span id="sl_i1" class="sl_command sl_i">&nbsp;</span>
			<span id="sl_i2" class="sl_command sl_i">&nbsp;</span>
			<span id="sl_i3" class="sl_command sl_i">&nbsp;</span>
			<span id="sl_i4" class="sl_command sl_i">&nbsp;</span>
			
			<section id="slideshow">
				
				<ul class="dots_commands"><!--
					--><li><a class="dots" id="dot1" title="Show slide 1" href="#sl_i1">Slide 1</a></li><!--
					--><li><a class="dots" id="dot2" title="Show slide 2" href="#sl_i2">Slide 2</a></li><!--
					--><li><a class="dots" id="dot3" title="Show slide 3" href="#sl_i3">Slide 3</a></li><!--
					--><li><a class="dots" id="dot4" title="Show slide 4" href="#sl_i4">Slide 4</a></li>
				</ul>
				
			</section>
			
		</div>
</div>
</body>

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:300,400);

@charset "UTF-8";

#slideshow { 
/*    borders (top,bottom, right,left) = 29,18,23,23.*/
	position: relative;
	top: 7px;
    left: -57px;
	width:	677px;
	height: 423px;
	padding: 0px; /* screenshots frame */
	margin: 0 auto 2em;
}
/* dots styles */
.dots_commands  {
	position: relative;
	top: 100px;
	padding:0; margin:0;
	text-align:center;
	letter-spacing:-4px;
}
.dots_commands li {
	display:inline;
	padding:0; margin:0;
	list-style:none;
}
.dots_commands a {
	position: relative;
	display:inline-block;
	height:8px; width: 8px;
	margin: 0 5px;
	text-indent: -9999px;
	background: #fff;
	border-bottom:0;
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
	box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;	
	z-index:25;
}

@-webkit-keyframes dotcolor1 {

	0%, 23%, 100%		{ background: rgb(191,121,178);	}
	25%, 97%	      	{ background: white;			}	
}

@-moz-keyframes dotcolor1 {

	0%, 23%, 100%		{ background: rgb(191,121,178);	}
	25%, 97%	      	{ background: white;			}	
}

@keyframes dotcolor1 {

	0%, 23%, 100%		{ background: rgb(191,121,178);	}
	25%, 97%	      	{ background: white;			}	
}

#dot1{
	-webkit-animation: dotcolor1 24s infinite;
	-moz-animation: dotcolor1 24s infinite;
	animation: dotcolor1 24s infinite;
} 


@-webkit-keyframes dotcolor2 {
	
	25%, 48%				{ background: rgb(191,121,178);	}
	0%, 23%, 50%, 100%		{ opacity: 1; background: white;}
}

@-moz-keyframes dotcolor2 {
	
	25%, 48%				{ background: rgb(191,121,178);	}
	0%, 23%, 50%, 100%		{ opacity: 1; background: white;}
}

@keyframes dotcolor2 {
	
	25%, 48%				{ background: rgb(191,121,178);	}
	0%, 23%, 50%, 100%		{ opacity: 1; background: white;}
}

#dot2{
	-webkit-animation: dotcolor2 24s infinite;
	-moz-animation: dotcolor2 24s infinite;
	animation: dotcolor2 24s infinite;
}

@-webkit-keyframes dotcolor3...