JSFiddle - React, Tailwind, and code Playground

by Arjun Singh

HTML

<div class="bar" data-index="10"></div>
<div class="bar" data-index="2"></div>
<div class="bar" data-index="3"></div>
<div class="bar" data-index="4"></div>

CSS

.bar{
  --index: attr(data-index vh);
  height: 20px;
  background-color: tomato;
  
  border: 5px solid #ddd;
  margin-bottom: 10px;
  
  transition: all 0.25s ease;
  
  transform: translateY(var(--index));
}