JSFiddle - React, Tailwind, and code Playground

HTML

<div>
            <ul>
<li><a href="index.html">Понятие</a></li>
<li><a href="page2.html">Производители</a></li>
<li><a href="page3.html">Intel</a></li>
<li><a href="page4.html">AMD</a></li>
</ul> 
        </div>

CSS

ul 
    {
  height: 50px;
  width: 100%;
  background-color: white;
  list-style: none;
  line-height: 30px;
}

li {
  display: inline-block;
  padding: 0 120px;
  margin: 0 0px;
  background-color: white;
  background: -moz-linear-gradient(45deg, rgb(0, 0, 255) 10%, rgb(255, 255, 255) 11%, rgb(255, 255, 255) 90%, rgb(0, 0, 255) 91%);
  background: -webkit-linear-gradient(45deg, rgb(0, 0, 255) 10%, rgb(255, 255, 255) 11%, rgb(255, 255, 255) 90%, rgb(0, 0, 255) 91%);
  background: -o-linear-gradient(45deg, rgb(0, 0, 255) 10%, rgb(255, 255, 255) 11%, rgb(255, 255, 255) 90%, rgb(0, 0, 255) 91%);
  background: -ms-linear-gradient(45deg, rgb(0, 0, 255) 10%, rgb(255, 255, 255) 11%, rgb(255, 255, 255) 90%, rgb(0, 0, 255) 91%);
  background: linear-gradient(135deg, rgb(0, 0, 255) 10%, rgb(255, 255, 255) 11%, rgb(255, 255, 255) 90%, rgb(0, 0, 255) 91%);
}