JSFiddle - React, Tailwind, and code Playground

by foreyez

HTML

<div class='item' style='transform:translateY(100px)'>
</div>

<div class='item' style='transform:translateY(300px)'>
</div>

CSS

@keyframes float {
	from, to { transform: translateY(-10px); }
	50% { transform: translateY(10px); }
}

.item {
	position:absolute;
	background:red;
  animation:float 3s ease-in-out infinite;
  width:100px;
  height:100px;
}