JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<body>
<header>
 <div class="kacopyrigsumed-menu">
 <ul class="kacopyrigsumed-ul">
 <li class="kacopyrigsumed-li"><a href="#"><i class="fa fa-home" aria-hidden="true"></i>Главная</a></li>
 <li class="kacopyrigsumed-li"><a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i>Магазин</a></li>
 <li class="kacopyrigsumed-li"><a href="#"><i class="fa fa-server" aria-hidden="true"></i>Услуги</a></li>
 <li class="kacopyrigsumed-li"><a href="#"><i class="fa fa-folder-open" aria-hidden="true"></i>Портфолио</a></li>
 <li class="kacopyrigsumed-li"><a href="#"><i class="fa fa-newspaper-o" aria-hidden="true"></i>Новости</a></li>
 </ul>
 </div>
</header>
</body>

CSS

body {font-size:63%;margin:1em;background:rgba(35, 36, 37, 0);}
ul { list-style:none; margin:0; padding:0 }
#zokdsatumiksan { font-size:1em; position:relative }
#zokdsatumiksan .frame-face {
 position:relative;
 width:30em;
 height:30em;
 margin:2em auto;
 border-radius:15em;
 background:-webkit-linear-gradient(top, #fbf1f1,#616161);
 background:-moz-linear-gradient(top, #f5eded,#656161);
 background:linear-gradient(to bottom, #f9f3f3,#696666);
 box-shadow:rgba(19, 18, 18, 0.9) .5em .5em 4em;
}
#zokdsatumiksan .frame-face:before {
 content:'';
 width:30em;
 height:30em;
 border-radius:15em;
 position:absolute;
 top:.3em; left:.3em;
 background:
 -webkit-linear-gradient(135deg, rgba(246, 248, 249, 0.03) 0%,rgb(225, 230, 232) 50%,rgba(205,212,217,1) 51%,rgba(229, 233, 236, 0) 100%),
 -webkit-radial-gradient(center, ellipse cover, rgb(243, 246, 247) 0%,rgb(222, 225, 226) 65%,rgb(196, 199, 202) 66%,rgb(233, 236, 239) 100%);
 background:
 -moz-linear-gradient(135deg, rgba(246, 248, 249, 0) 0%,rgba(229,235,238,1) 50%,rgba(205,212,217,1) 51%,rgba(245,247,249,0) 100%),
 -moz-radial-gradient(center, ellipse cover, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 65%,rgba(205,212,217,1) 66%,rgba(245,247,249,1) 100%);
 background:
 linear-gradient(135deg, rgba(246,248,249,0) 0%,rgb(204, 211, 214) 50%,rgba(205,212,217,1) 51%,rgba(221, 224, 228, 0) 100%),
 radial-gradient(ellipse at center, rgb(234, 238, 241) 0%,rgb(216, 221, 224) 65%,rgb(200, 207, 212) 66%,rgb(236, 240, 245) 100%);
}
#zokdsatumiksan .frame-face:after {
 content:'';
 width:30em;
 height:30em;
 border-radius:15em;
 position:absolute;
 top:.9em; left:.9em;
 box-shadow:inset rgba(23, 22, 22, 0.23) .2em .2em 1em;
 border:.1em solid rgba(19, 18, 18, 0.25);
 background:-webkit-linear-gradient(top, #f5ebeb, #c3b9b9);
 background:-moz-linear-gradient(top, #f7efef, #cac0c0);
 background:linear-gradient(to bottom, #efe8e8, #ccc);
}
#zokdsatumiksan .minute-marks li {
 display:block;
 width:.2em;
 height:.6em;
...