JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="animationcss.css">
</head>

<body>
<div id="background">
<div id="blue"></div>
<div id="red"></div>
</div>
<button id="button1" onClick=""> > </button>
<button id="button2"> < </button>
<button id="button3"> > </button>
<button id="button4"> # </button>
</body>
</html>

CSS

@charset "UTF-8";
/* CSS Document */

#background	{
	background-color:#3CF;
	width:240px;
	height:100px;
	border:medium;
	
	
}

#blue	{
	background-color:blue;
	width:50px;
	height:50px;
	position:absolute;
	margin-top:20px;
	margin-left: 20px;
	border:thin;
	border-color:#000;
	border-width:1px;

	}
	
	#red	{
		background-color:red;
		width:50px;
		height:50px;
		position:absolute;
		margin-left: 150px;
		margin-top:20px;
		border:thin;
		border-color:#000;
		border-width:1px;
		
	-webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    -webkit-animation-name: example;
	-webkit-animation-iteration-count: infinite;
	
	}
	/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {right:315px; top:8px;}
    50%  {right:430px; top:8px;}
    100%   {right:315px; top:8px;}

}

/* Standard syntax */
@keyframes example {
     0%   { right:315px; top:8px;}
    50%  { right:430px; top:8px;}
    100%   { right:315px; top:8px;}

}
	
	#button1	{
		width: 40px;}
	#button2	{
		width: 40px;}
	#button3	{width: 40px;
	}
	#button4	{width: 40px;
	}