JSFiddle - React, Tailwind, and code Playground

by alfredopacino

HTML

<div class="DNA_cont">
  <div class="nucleobase"></div>
  <div class="nucleobase"></div>
  <div class="nucleobase"></div>
  <div class="nucleobase"></div>
  <div class="nucleobase"></div>
  <div class="nucleobase"></div>
  <div class="nucleobase"></div>
  <div class="nucleobase"></div>
  <div class="nucleobase"></div>
  <div class="nucleobase"></div>
</div>

CSS

.DNA_cont {
  display: inline-block;
  position: relative;
  -webkit-transform: scale(0.45);
          transform: scale(0.45);
}

.nucleobase {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}
.nucleobase:not(:last-child) {
  margin-right: 4.86vh;
}
.nucleobase:before, .nucleobase:after {
  content: "";
  display: inline-block;
  width: 3vh;
  height: 3vh;
  border-radius: 50%;
  position: absolute;
}
.nucleobase:nth-child(1) {
  -webkit-animation-delay: -1.869s;
          animation-delay: -1.869s;
}
.nucleobase:nth-child(1):before {
  -webkit-animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
          animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
  -webkit-animation-delay: -1.869s;
          animation-delay: -1.869s;
  background-color: #ff8490;
}
.nucleobase:nth-child(1):after {
  -webkit-animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
          animation: animAfter 2.1s cubic-bezier(1.42, 1, 0.58, 1) infinite;
  -webkit-animation-delay: -1.869s;
          animation-delay: -1.869s;
  background-color: black;
}
.nucleobase:nth-child(2) {
  -webkit-animation-delay: -3.738s;
          animation-delay: -3.738s;
}
.nucleobase:nth-child(2):before {
  -webkit-animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
          animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
  -webkit-animation-delay: -3.738s;
          animation-delay: -3.738s;
  background-color: #ff8490;
}
.nucleobase:nth-child(2):after {
  -webkit-animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
          animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
  -webkit-animation-delay: -3.738s;
          animation-delay: -3.738s;
  background-color: #ff737c;
}
.nucleobase:nth-child(3) {
  -webkit-animation-delay: -5.607s;
          animation-delay: -5.607s;
}
.nucleobase:nth-child(3):before {
  -webkit-animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58,...