JSFiddle - React, Tailwind, and code Playground

by azlar chen

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
	<section>
		<div class='p'>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
						<div></div>
			<div></div>
			<div></div>
						<div></div>
			<div></div>
			<div></div>
						<div></div>
			<div></div>
			<div></div>
						<div></div>
			<div></div>
			<div></div>
						<div></div>
			<div></div>
			<div></div>
						<div></div>
			<div></div>
			<div></div>
						<div></div>
			<div></div>
						<div></div>
			<div></div>
			<div></div>
						<div></div>
			<div></div>
			<div></div>
						<div></div>
			<div></div>
						<div></div>
			<div></div>
			<div></div>
						<div></div>
			<div></div>
			<div></div>
						<div></div>
			<div></div>
						<div></div>
			<div></div>
			<div></div>
						<div></div>
			<div></div>
			<div></div>
						<div></div>
			<div></div>
						<div></div>
			<div></div>
			<div></div>
						<div></div>
			<div></div>
			<div></div>
						<div></div>
						<div></div>
			<div></div>
			<div></div>
						<div></div>
			<div></div>
			<div></div>
						<div></div>
						<div></div>
			<div></div>
			<div></div>
						<div></div>
			<div></div>
			<div></div>
						<div></div>
						<div></div>
			<div></div>
			<div></div>
						<div></div>
			<div></div>
			<div></div>
		</div>
	</section>
</body>
</html>

CSS

section {
	width: 500px;
	height: 40px;
	background: linear-gradient(to right, yellow, red,rgba(0,0,222,.8),rgba(0,0,255,.8), blue);
	
	overflow: hidden;
	position: relative;
	
	border-radius: 20px;
	box-shadow: 0 0 3px 1px rgba(0,0,0, .1);
	transition: box-shadow 1s, transform 1s;
	
	&:hover {
			box-shadow: 3px 5px 5px 1px rgba(0,0,0, .2);
			transform: translate(2px, 3px);
	}
	user-select: none;
}


div:not(.p) {
    height: 300px;
    width: 15px;
    background-color: rgba(255,255,255,.5);
    display: inline-block;
    transform: rotate(45deg) translate(17px, -30px);
    margin: 9px;
    transform-origin: 31px 36px 0;
		transition: 1s background-color;
}

div.p {
		animation: move 25s infinite linear;
		animation-fill-mode: backwards;
		width: 10000px;
		transform: translateX(-1860px);
	
	&:hover > div {
		background-color: rgba(255,255,255,.8);
	}
}

@keyframes move{
	from {
		transform: translateX(-1860px);
	}
	to {
		transform: translateX(-200px);
	}
}