JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="note">ZorNet.Ru: Создание сайта uCoz</div>
<div class="terhulopas">
 <div class="tymildosam"> 
 <div class="va">ZR</div>
 <div class="va type2">ZR</div>
 <div class="boxes">
 <div class="one kersamirsek">JS</div>
 <div class="two kersamirsek"></div>
 <div class="three kersamirsek">WP</div>
 <div class="four kersamirsek"></div>
 <div class="five kersamirsek">UX</div>
 <div class="six kersamirsek">CSS3</div> 
 </div>
 </div>
 <div class="zodsanum">
 <div class="gusanilam">HTML5</div>
 <div class="gusanilam">CSS3</div>
 <div class="gusanilam">JS</div>
 <div class="gusanilam">WP</div>
 <div class="gusanilam">UX</div>
 </div>
</div>

CSS

body {
 color:#000;
 font-family:sans-serif; 
 font-size:11px;
 margin:20px;
 text-align:center;
}

.note {
 position:absolute;
 top:20px;
 left:10px;
}

.terhulopas { background:url(http://www.volkanaltinbas.com/images/logo_volkanaltinbas_3d.gif)
 0 no-repeat;
 cursor:pointer;
 width:200px;
 height:200px;
 position:absolute;
 top:50%;
 left:50%;
 margin-left:-100px;
 margin-top:-100px;
}

.tymildosam {
 font-size:14px; 
 line-height:40px; 
 position:absolute;
 top:70px;
 left:140px;
 height:40px;
 width:40px;
 -webkit-transform-style: preserve-3d;
 -webkit-transform-origin:50%; 
 -webkit-animation-name: ciycle; 
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
 -webkit-animation-duration: 6s;
}

.boxes {
 position:absolute;
 top:0;
 left:0;
 -webkit-transition: all 1s ease-in-out; 
}

.va {
 background:black;
 color:#fff;
 border-radius:50px;
 position:absolute;
 top:-50px;
 left:0;
 height:40px;
 width:40px;
 text-align:center; 
 -webkit-box-shadow: rgba(0,0,0,0.08) 1px 1px 2px 3px;
 -webkit-transition:all 0.8s ease-in-out; 
 -webkit-animation-name: ciycle2; 
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
 -webkit-animation-duration: 1.4s; 
}

.va.type2 {
 -webkit-transform:rotateY(180deg) translateZ(1px); 
 -webkit-animation-name: ciycle3; 
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
 -webkit-animation-duration: 1.4s; 
}

.zodsanum {
 position:absolute;
 top:85px;
 left:150px;
 text-align:center;
 line-height:40px;
 height:50px;
 width:50px;
 opacity:0;
 -webkit-transition: all .5s ease-out; 
 -webkit-transition-delay: 0.30s; 
}

.gusanilam {
 position:absolute;
 top:0;
 left:0;
 opacity:0;
 -webkit-animation-name: gusanilam; 
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear; 
 -webkit-animation-duration: 2.5s;
}

.gusanilam:nth-child(1) {
 -webkit-animation-delay:0;
}

.gusanilam:nth-child(2)...