JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<nav class="dtukolsmopen_sxtun">
  <div class="zkirudsa">
	  <ul>
		  <li><a href="">Главное</a></li>
		  <li><a href="">Скрипты</a></li>
		  <li><a href="">Шаблоны</a></li>
		  <li><a href="">ZorNet.ru</a></li>
	  </ul>
	  <form action="" id="kagtesmib">
      <input type="text" placeholder="Поиск" />
	  </form>
  </div>
</nav>

CSS

* {outline: none;}
a, zkirudsa {
	text-decoration: none;
	-webkit-transition: all .25s ease-in-out;
	   -moz-transition: all .25s ease-in-out;
	    -ms-transition: all .25s ease-in-out;
	     -o-transition: all .25s ease-in-out;
	        transition: all .25s ease-in-out;
}

.dtukolsmopen_sxtun {
    position: relative;
    display: block;
    clear: both;
    margin: 9px 37px;
    width: 898px;
    height: 39.7px;
    box-shadow: inset 1px 0 1px #0d3e5f, inset -1px 0 1px #073756, -5px 0 1px #105988, -10px 0 1px #0a79ab, inset 0 2px 0 #17549e, inset 0 1px 0 #88e6e6, inset 0 -2px 0 #1287af, inset 0 -1px 0 #09355d, 5px 0 1px #0e5e90, 10px 0 1px #0d84b7;
    background: #043e64;
    background: -moz-linear-gradient(left, #043e64 0%, #0b86c9 54%, #0b86c9 57%, #0b86c9 60%, #0b86c9 62%, #0b86c9 64%, #0b86c9 67%, #0b86c9 70%, #0b86c9 75%, #063d64 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d6290), color-stop(54%,#1775a9), color-stop(57%,#167ab1), color-stop(60%,#0b86c9), color-stop(62%,#1f84bb), color-stop(64%,#0b86c9), color-stop(67%,#177fb7), color-stop(70%,#1e83b9), color-stop(75%,#1b73a2), color-stop(100%,#063d64));
    background: -webkit-linear-gradient(left, #043e64 0%,#2681b3 54%,#0b86c9 57%,#1a7aaf 60%,#1c80b7 62%,#1975a7 64%,#1c7eb3 67%,#1a76a9 70%,#1e80b5 75%,#063d64 100%);
    background: linear-gradient(to right, #164463 0%,#0b86c9 54%,#0b86c9 57%,#0b86c9 60%,#0b86c9 62%,#0b86c9 64%,#0b86c9 67%,#0b86c9 70%,#0b86c9 75%,#245679 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#043e64', endColorstr='#063d64',GradientType=1 );
    -webkit-transform: skewX(-40deg);
    -moz-transform: skewX(-40deg);
    -ms-transform: skewX(-40deg);
    -o-transform: skewX(-40deg);
    transform: skewX(-40deg);
}
  .dtukolsmopen_sxtun .zkirudsa {
    -webkit-transform: skewX(40deg);
		   -moz-transform: skewX(40deg);
		    -ms-transform: skewX(40deg);
		     -o-transform: skewX(40deg);
		        transform:...