JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://rootdroid.zz.mu/js/prefixfree.min.js"></script>
<div class='container'>
<div class='cnt1 column'></div>
<div class='cnt2 column'></div>
<div class='cnt3 column'></div>
<div class='cnt4 column'></div>
<div class='cnt5 column'></div>
<div class='cnt6 column'></div>
<div class='cnt7 column'></div>
<div class='cnt8 column'></div>
<div class='cnt9 column'></div>
<div class='cnt10 column'></div>
<div class='cnt11 column'></div>
<div class='cnt12 column'></div>
<div class='cnt13 column'></div>
<div class='cnt14 column'></div>
<div class='cnt15 column'></div>
<div class='cnt16 column'></div>
<div class='cnt17 column'></div>
<div class='cnt18 column'></div>
<div class='cnt19 column'></div>
<div class='cnt20 column'></div>
<div class='cnt21 column'></div>
<div class='cnt22 column'></div>
<div class='cnt23 column'></div>
<div class='cnt24 column'></div>
<div class='cnt25 column'></div>
<div class='cnt26 column'></div>
<div class='cnt27 column'></div>
<div class='cnt28 column'></div>
<div class='cnt29 column'></div>
<div class='cnt30 column'></div>
<div class='cnt31 column'></div>
<div class='cnt32 column'></div>
<div class='cnt33 column'></div>
<div class='cnt34 column'></div>
<div class='cnt35 column'></div>
<div class='cnt36 column'></div>
<div class='cnt37 column'></div>
<div class='cnt38 column'></div>
<div class='cnt39 column'></div>
<div class='cnt40 column'></div>
<div class='imgframe'></div>
</div>
CSS
body {
background: #000000;
}
.imgframe {
position: absolute;
top: -10px;
left: -6px;
border: solid 24px #fff;
width: 380px;
height: 210px;
z-index: 1000;
}
.container {
position: absolute;
top: 150px;
left: 115px;
transform: scale(1.5, 1.5);
}
.column {
position: absolute;
top: 0px;
width: 14px;
height: 240px;
background: url("http://rootdroid.zz.mu/images/img.png");
animation: wobble 3s infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
.column:nth-child(1) {
left: 10px;
background-position: -10px 0;
animation-delay: 30ms;
}
.column:nth-child(2) {
left: 20px;
background-position: -20px 0;
animation-delay: 60ms;
}
.column:nth-child(3) {
left: 30px;
background-position: -30px 0;
animation-delay: 90ms;
}
.column:nth-child(4) {
left: 40px;
background-position: -40px 0;
animation-delay: 120ms;
}
.column:nth-child(5) {
left: 50px;
background-position: -50px 0;
animation-delay: 150ms;
}
.column:nth-child(6) {
left: 60px;
background-position: -60px 0;
animation-delay: 180ms;
}
.column:nth-child(7) {
left: 70px;
background-position: -70px 0;
animation-delay: 210ms;
}
.column:nth-child(8) {
left: 80px;
background-position: -80px 0;
animation-delay: 240ms;
}
.column:nth-child(9) {
left: 90px;
background-position: -90px 0;
animation-delay: 270ms;
}
.column:nth-child(10) {
left: 100px;
background-position: -100px 0;
animation-delay: 300ms;
}
.column:nth-child(11) {
left: 110px;
background-position: -110px 0;
animation-delay: 330ms;
}
.column:nth-child(12) {
left: 120px;
background-position: -120px 0;
animation-delay: 360ms;
}
.column:nth-child(13) {
left: 130px;
background-position: -130px 0;
animation-delay: 390ms;
}
.column:nth-child(14) {
left: 140px;
background-position: -140px 0;
animation-delay: 420ms;
}
.column:nth-child(15) {
left: 150px;
background-position: -150px 0;
animation-delay:...