JSFiddle - React, Tailwind, and code Playground

by shaashwato1308

HTML

<body>		
	<div style="width: 249px; height: 539px; background-image: url(http://dev.webimprovise.com/external_resources/fiddle/01/background.jpg);" >
		<div style="margin-left:30px; padding-top:65px">
			<div class='one-line-one olo-d'>
				D
			</div>
			&nbsp;
			<div class='one-line-one olo-e'>
				E
			</div>
			&nbsp;
			<div class='one-line-one olo-f'>
				F
			</div>
		</div>
		<div style="margin-left:30px; padding-top:50px">
			<div class='one-line-one olo-a'>
				A
			</div>
			&nbsp;
			<div class='one-line-one olo-b'>
				B
			</div>
			&nbsp;
			<div class='one-line-one olo-c'>
				C
			</div>
		</div>
	</div>
</body>

CSS

body {margin: 4em 10%; background:#737373;}
.block{
	background-color:red;
	padding:10px;
	height: 20px;
	width: 20px;

}

.one-line-one{
	display:inline;
	padding: 20px;
	background-color:red;
}

.olo-a{
	-webkit-animation-name: move-right;
	-webkit-animation-duration: 2s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count:1;
	-webkit-animation-fill-mode: forwards;
}
.olo-b{
	
}
.olo-c{
	
}
.olo-d{
	
}
.olo-e{
	
}
.olo-f{
	
}

.ball1 {
	-webkit-animation-name: l2r;
	-webkit-animation-duration: 2s;
	/* 	-webkit-animation-delay:1s; */
}
.ball2 {
	-webkit-animation-name: d2u;
	-webkit-animation-duration: 2s;
	/* 	-webkit-animation-delay:1s; */
}

/* For our backwards animation-fill-mode example */
@-webkit-keyframes move-left-right {
	0% {-webkit-transform: translateY(100px);}
	20% {-webkit-transform: translateY(-10px);}
	/*100% {-webkit-transform:translateY(450px);}			*/
}

/* For our forwards animation-fill-mode */
@-webkit-keyframes move-right {
	from {-webkit-transform: translateX(0);}
	to {-webkit-transform: translateX(50px);}
}