JSFiddle - React, Tailwind, and code Playground

by sedoj

HTML

<div class="wrapper">
                <nav class="main-menu">
                    <ul class="menu">
                        <li><a href="#">Меню1</a></li>
                        <li><a href="#">Меню2</a></li>
                        <li><a href="#">Меню3</a></li>
                        <li><a href="#">Меню4</a></li>
                    </ul>
                    <div class="test"></div>
                </nav>
               </div>

CSS

.wrapper {
  background: #D0A978;
  height: 600px;
  padding: 40px;
  width: 1220px;
}
.main-menu{
  background: #ffb400;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffb800), to(#ffb400)); 
  background: -moz-linear-gradient(top,#ffb800,#ffb400);
  background: -o-linear-gradient(top, #ffb800,#ffb400);
  background: linear-gradient(top,#ffb800,#ffb400);
  -webkit-border-radius: 30px 30px 0 0;
  -moz-border-radius: 30px 30px 0 0;    
  border-radius: 30px 30px 0 0;
  float: left;
  height: 230px;
  width: 1000px;
}
.main-menu li a{
  border-right: 1px solid #ef9e00; 
  border-left: 1px solid #ffcb3d; 
  color: #442613;
  display: block;
  float: left;
  font: bold 28px/230px Arial, Helvetica, sans-serif;
  height: 230px;
  text-align: center;
  text-decoration: none;
  width: 248px;
  float: left;
}
.main-menu li a:hover {
  background: #ffac00;
  border-left: 1px solid #ffb400; 
  color: #fff;
}
/*.test {
  background: url(http://s55.radikal.ru/i147/1210/0d/2ace04b53bb8.png) no-repeat;
  width: 1000px;
  height: 27px;
  position:absolute;
}*/