JSFiddle - React, Tailwind, and code Playground

by Yuraost

HTML

<ul>
   <li>Uno</li><li>Dos</li><li>Tres</li><li>Quatro</li>
  </ul>

CSS

ul {
       height: 39px;
       min-width: 300px;
       padding: 0;
       overflow: hidden;
       list-style: none;
       background: -webkit-linear-gradient(top, #fcfdfa, #b0c17a);
       background: -o-linear-gradient(top, #fcfdfa, #b0c17a);
       background: -ms-linear-gradient(top, #fcfdfa, #b0c17a);
       background: -moz-linear-gradient(top, #fcfdfa, #b0c17a);
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfdfa', 
            endColorstr='#b0c17a',GradientType=0)
      } 
   li {
       display: inline-block;
       padding: 10px 20px;
       border-radius: 0 25px 25px 0;
       -webkit-border-radius: 0 25px 25px 0;
       -moz-border-radius: 0 25px 25px 0;       
       box-shadow: 2px 0 1px 0px grey,
                   inset -2px 0 1px 0px white;
       -webkit-box-shadow: 2px 0 1px 0px grey,
                           inset -2px 0 1px 0px white;
       -moz-box-shadow: 2px 0 1px 0px grey,
                        inset -2px 0 1px 0px white;                                                                              
      }