JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<ul>
 <li><a href="http://zornet.ru" class="kingapensive discusomplica">ZR-1<span class="kingapensive">Скрипты и шаблоны на сайте zornet.ru</span></a></li>
 <li><a href="http://zornet.ru/load/142" class="kingapensive lerstasirodu">ZR-2<span class="kingapensive">Здесь найдете тематические шаблоны сайта. </span></a></li>
 <li><a href="http://zornet.ru/load/85" class="kingapensive zornertumiksa">ZR-3<span class="kingapensive">Также не обойтись без стилистики на zornet.ru</span></a></li>
</ul>

CSS

* {
 margin: 0;
 padding: 0;
 -moz-box-sizing: border-box;
 -o-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 }

 body {
 width: 100%;
 height: 100%;
 font-family: "helvetica neue", helvetica, arial, sans-serif;
 font-size: 13px;
 text-align: center;
 background: #333 url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/low_contrast_linen.png');
 }

 ul {
 margin: 25px auto;
 text-align: center;
 }

 li {
 list-style: none;
 position: relative;
 display: inline-block;
 width: 100px;
 height: 100px;
 }

 @-moz-keyframes rotate {
 0% {transform: rotate(0deg);}
 100% {transform: rotate(-360deg);}
 }

 @-webkit-keyframes rotate {
 0% {transform: rotate(0deg);}
 100% {transform: rotate(-360deg);}
 }

 @-o-keyframes rotate {
 0% {transform: rotate(0deg);}
 100% {transform: rotate(-360deg);}
 }

 @keyframes rotate {
 0% {transform: rotate(0deg);}
 100% {transform: rotate(-360deg);}
 }

 .kingapensive {
 display: block;
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 padding-top: 30px; 
 text-decoration: none; 
 text-align: center;
 font-size: 23px; 
 text-shadow: 0 1px 0 rgba(255,255,255,.7);
 letter-spacing: -.065em;
 font-family: "Hammersmith One", sans-serif; 
 -webkit-transition: all .25s cubic-bezier(0.42, 0, 0.52, 0.96);
 -o-transition: all .25s cubic-bezier(0.42, 0, 0.43, 0.94);
 -moz-transition: all .25s cubic-bezier(0.42, 0, 0.33, 0.94);
 transition: all .25s cubic-bezier(0.42, 0, 0.45, 0.96);
 box-shadow: 3px 4px 5px rgba(27, 26, 26, 0.25);
 border-radius: 300px;
 z-index: 1;
 border-width: 5px;
 border-style: solid;
 }

 .kingapensive:hover {
 width: 129.7%;
 height: 130%;
 left: -15%;
 top: -15%;
 font-size: 29px;
 padding-top: 41px;
 -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
 -o-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
 -moz-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
 box-shadow: 5px 5px 10px rgba(0,0,0,.3);
 z-index: 2;
 border-size: 9px;
 -webkit-transform: rotate(-360deg);
...