JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="container">
        <div class="dna d1"><div class="rectangle1"></div><div class="rectangle2"></div><div class="rectangle3"></div><div class="rectangle4"></div><div class="rectangle5"></div><div class="rectangle6"></div><div class="rectangle7"></div><div class="rectangle8"></div><div class="rectangle9"></div><div class="rectangle10"></div><div class="rectangle11"></div><div class="rectangle12"></div><div class="rectangle13"></div><div class="rectangle14"></div><div class="rectangle15"></div><div class="rectangle16"></div><div class="rectangle17"></div><div class="rectangle18"></div><div class="rectangle1"></div><div class="rectangle2"></div><div class="rectangle3"></div><div class="rectangle4"></div><div class="rectangle5"></div><div class="rectangle6"></div><div class="rectangle7"></div><div class="rectangle8"></div><div class="rectangle9"></div><div class="rectangle10"></div><div class="rectangle11"></div><div class="rectangle12"></div><div class="rectangle13"></div><div class="rectangle14"></div><div class="rectangle15"></div><div class="rectangle16"></div><div class="rectangle17"></div><div class="rectangle18"></div><div class="rectangle1"></div><div class="rectangle2"></div><div class="rectangle3"></div><div class="rectangle4"></div><div class="rectangle5"></div><div class="rectangle6"></div><div class="rectangle7"></div><div class="rectangle8"></div><div class="rectangle9"></div><div class="rectangle10"></div><div class="rectangle11"></div><div class="rectangle12"></div><div class="rectangle13"></div><div class="rectangle14"></div><div class="rectangle15"></div><div class="rectangle16"></div><div class="rectangle17"></div><div class="rectangle18"></div><div class="rectangle1"></div><div class="rectangle2"></div><div class="rectangle3"></div><div class="rectangle4"></div><div class="rectangle5"></div><div class="rectangle6"></div><div class="rectangle7"></div><div class="rectangle8"></div><div...

CSS

body {
    background-color: black;
    background-image: -webkit-gradient(radial,
        50% 500, 1,
        50% 500, 400,
        from(rgba(255, 255, 255, 0.3)),
        to(rgba(255, 255, 255, 0)));
}
.wrapper {
    -webkit-perspective: 1000;
    -webkit-perspective-origin:50% 25%;
}
.container {
    -webkit-transform:rotate(30deg) translateY(-150px);
    -webkit-transform-origin:center;
    -webkit-transform-style: preserve-3d;
}

.dna {
    height:200px;
    width:20px;
    position:relative;
    margin:0 auto;
    -webkit-transform-origin:center;
    -webkit-transform-style: preserve-3d;
    -webkit-animation:dna 3s infinite linear;
}
.d2 {
    top:-188px;
}
.d3 {
    top:-376px;
}
.dna div {
    width:20px;
    height:10px;
    position:relative;
    box-shadow:0 0 2px #00f;
    background:rgba(255,0,0,0.5);
    text-align:center;
    -webkit-backface-visibility: visible;
}
.d2 div {
    background:rgba(0,255,0,0.5);
}
.d3 div {
    background:rgba(0,0,255,0.5);
}
.dna .rectangle1 {
    -webkit-transform:translateZ(80px); 
}
.dna .rectangle2 {
    -webkit-transform: rotateY(20deg) translateZ(80px); 
}
.dna .rectangle3 {
    -webkit-transform:rotateY(40deg) translateZ(80px); 
}
.dna .rectangle4 {
    -webkit-transform:rotateY(60deg) translateZ(80px); 
}
.dna .rectangle5{
    -webkit-transform:rotateY(80deg) translateZ(80px); 
}
.dna .rectangle6{
    -webkit-transform:rotateY(100deg) translateZ(80px); 
}
.dna .rectangle7{
    -webkit-transform:rotateY(120deg) translateZ(80px); 
}
.dna .rectangle8{
    -webkit-transform:rotateY(140deg) translateZ(80px); 
}
.dna .rectangle9{
    -webkit-transform:rotateY(160deg) translateZ(80px); 
}
.dna .rectangle10{
    -webkit-transform:rotateY(180deg) translateZ(80px); 
}
.dna .rectangle11{
    -webkit-transform:rotateY(200deg) translateZ(80px); 
}
.dna .rectangle12{
    -webkit-transform:rotateY(220deg) translateZ(80px); 
}
.dna .rectangle13{
    -webkit-transform:rotateY(240deg) translateZ(80px); 
}
.dna .rectangle14{
  ...