JSFiddle - React, Tailwind, and code Playground

by srinivaspotluri

HTML

<div class="hourglass">
	<div class="hourglass-stand"></div>
	<div class="hourglass-sand"></div>
	<div class="hourglass-stream"></div>
</div>

CSS

/* All other browsers */

.hourglass { 
	position: relative; 
	width: 18px;
	height: 36px;
	animation: hourglass-spin 8s ease-in-out 4s infinite;
	-webkit-animation: hourglass-spin 8s ease-in-out 4s infinite;
  left: 5px;
} 

.hourglass::before, .hourglass::after { 
	position: absolute; 
	content: ''; 
	left: 0;  
	bottom: 0;
	width: 20px;
	height: 20.5px;
	background: #000;
	border: 1px solid #000;
	border-top-left-radius: 15px 25px; 
	border-top-right-radius: 15px 25px; 
}

.hourglass::before { 
	top: 0; 
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
}

.hourglass .hourglass-stand::after, .hourglass .hourglass-stand::before {
	position: absolute;
	content: '';
	z-index: 3;
	left: -7px;
	bottom: 0;
	width: 36px;
	height: 3px;
	background: #000;
}

.hourglass .hourglass-stand::before {
	top: 0;
}

.hourglass .hourglass-sand::before, .hourglass .hourglass-sand::after { 
	position: absolute;
	content: ''; 
	z-index: 2; 
	left: 2px;
	bottom: 2px;
	width: 18px;
	height: 15px;
	background: linear-gradient(#CF9751 0%,#CF9751 50%,#fff 50%,#ddd 100%);
	background-size: 10px 50px;
	border-top-left-radius: 14px 28.6px; 
	border-top-right-radius: 14px 28.6px;
	animation: hourglass-sand 8s ease-in-out 0s infinite;  
	-webkit-animation: hourglass-sand 8s ease-in-out 0s infinite; 
}

.hourglass .hourglass-sand::before { 
	top: 2px; 
	transform: rotate(180deg); 
	animation-delay: -4s; 
	-webkit-transform: rotate(180deg); 
	-webkit-animation-delay: -4s; 
}

.hourglass .hourglass-stream { 
	position: absolute;  
	z-index: 2;
	left: 10px;
	width: 2px;
	height: 14.5px;
	opacity: 0;
	background: #CF9751;
	animation: hourglass-stream 8s linear 0.6s infinite;
	-webkit-animation: hourglass-stream 8s linear 0.6s infinite;  
}

@keyframes hourglass-spin { 
	0% { transform: rotate(0deg); }
	10% { transform: rotate(180deg); }
	50% { transform: rotate(180deg); }
	60% { transform: rotate(360deg); }
	100% { transform: rotate(360deg); }
}
@keyframes hourglass-sand {
	0% {...