JSFiddle - React, Tailwind, and code Playground

HTML

<div class="float">
  <div class='item'>
  </div>
</div>

CSS

.float {
  transform: translateY(100px);
  position: absolute;
}
.item {
  animation: float 3s infinite ease-in-out;
  }

.item, .item:after {
  display: block;
  position: relative;
  background: red;
  width: 100px;
  height: 100px;
}
.item:after {
  content: "";
  transform: translateY(200px);
}
@keyframes float {
  from, to {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(10px);
  }
}