JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<ul>
  <li>Look at me!</li>
  <li>I'm a tweet!</li>
  <li>What a coincidence...</li>
  <li>So am I!</li>
  <li>Why are we so popular?</li>
  <li>We're like - really pretty, you know?</li>
  <li>That's all that matters!</li>
</ul>

SCSS

ul {
  margin: 0;
  padding: 0;
  width: 300px;
  overflow: hidden;
  list-style: none;
  border: 1px black solid;
  color: rgb(135, 153, 167);
}

li {
  margin: 0;
  padding: 1.5em 1em 1.5em 4em;
  background: radial-gradient(circle at center, #a9e775 65%, transparent 65%) no-repeat .5em 50% / 3em 3em, #1a2837;
  animation: reveal 1s forwards;
  opacity: 0;
  transform: translateX(-100%);
}

li+li {
  border-top: 1px black solid;
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@for $i from 1 through 10 {
  li:nth-child(#{$i}) {
    animation-delay: calc(0.1s * #{$i})
  }
}