JSFiddle - React, Tailwind, and code Playground

by anmol sandal

HTML

<!Doctype html>
<html>
<body>

<div class="outer">


  <div id="B1XatYT3G">

  <div id="rJxXatK6hf_rJOt_14pz" class="image">
  <div id="rJxXatK6hf_SkoFu1Epf">
  <div id="rJxXatK6hf">
    	<div id="SybXptYTnG">
    		<div id="HyGQ6YF6nf">
    			<div id="HkXXaFKT3G">
    				<div id="SkEQaYFanf">
              <div>
    					<img src="https://image.ibb.co/dz2Win/facbook.png" alt="facbook" border="0" />
              </div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div></div>
  
</div>
  
  

  <div id="rkOXaYYa3M_rJf9u1Eaf" class="image">
  
  <div id="rkOXaYYa3M_BJVcuJNTf">
    <div id="rkOXaYYa3M">
    	<div id="rkYX6ttanz">
    		<div id="ry976tYTnz">
    			<div id="SJoXpKYThG">
    				<div id="B13Q6FK6nz">
              <div >
              <img src="https://image.ibb.co/dxLCpS/instagram.png" alt="tweeter" border="0"/>
    					
              </div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div></div></div>


    <div id="rkXxQTYYTnG" class="dot">
      <div id="ry4x7TKKTnz">
        <div >
        <img src="https://image.ibb.co/iypu3n/dot.png" alt="dot" border="0" />
        </div>
      </div>
    </div>

  

  <div id="SkLgXTFYahz_r1RiuJVaG"  class="image">
  <div id="SkLgXTFYahz_HJRA_JEpG">
  <div id="SkLgXTFYahz_Hyy3OyEaM">
  <div id="SkLgXTFYahz">
    	<div id="HywlXatK6hf">
    		<div id="SkugmptYpnz">
    			<div id="Bytx76tK62f">
            <div>
    				<img src="https://image.ibb.co/fdV6G7/tweeter.png" alt="tweeter" border="0" />
            </div>
    			</div>
    		</div>
    	</div>
    </div></div></div></div>
  </div>
</div>
</body>
</html>

CSS

html {
background: #000;
display: flex;
align-items: center;
height: 100%;
justify-content: center;
}

.outer {
 width: 402px;
}

body {
background: #000;
}

@-webkit-keyframes SkLgXTFYahz_HJRA_JEpG_Animation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    6.67% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    13.33% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes SkLgXTFYahz_HJRA_JEpG_Animation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    6.67% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    13.33% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@-webkit-keyframes SkLgXTFYahz_Hyy3OyEaM_Animation {
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    13.33% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    20% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    26.67% {
        -webkit-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
    }
    33.33% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    40% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    46.67% {
        -webkit-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
    }
    53.33% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    60% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    66.67% {
        -webkit-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
    }
    73.33% {
       ...