JSFiddle - React, Tailwind, and code Playground

by Yuraost

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Хлебные крошки</title>
  </head>
  
  <body>
    <ul class="menu">
      <li><a href="">Uno</a>

      </li>
      <li><a href="">Dos</a>

      </li>
      <li><a href="">Tres</a>

      </li>
      <li><a href="">Quatro</a>

      </li>
    </ul>
  </body>

</html>

CSS

.menu {
  border-radius:0 30px 30px 0;
  -moz-border-radius:0 30px 30px 0;
  -ms-border-radius:0 30px 30px 0;
  -o-border-radius:0 30px 30px 0;
  -webkit-border-radius:0 30px 30px 0;
  background: #e4efc0;
  background:-moz-linear-gradient(top, #e4efc0 0%, #e7fccc 35%, #e4efc0 54%, #abbd73 99%);
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #e4efc0), color-stop(35%, #e7fccc), color-stop(54%, #e4efc0), color-stop(99%, #abbd73));
  background:-o-linear-gradient(top, #e4efc0 0%, #e7fccc 35%, #e4efc0 54%, #abbd73 99%);
  background: -ms-linear-gradient(top, #e4efc0 0%, #e7fccc 35%, #e4efc0 54%, #abbd73 99%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e4efc0', endColorstr='#abbd73', GradientType=0);
  margin:10px;
}
.menu li {
  display:inline-block;
  list-style:none;
  padding:11px;
  padding-right:40px;
  width:30px;
  border-right:2px solid #FFF;
  box-shadow:3px 0px 2px #999;
  -moz-box-shadow:3px 0px 2px #999;
  -o-box-shadow:3px 0px 2px #999;
  -webkit-box-shadow:3px 0px 2px #999;
  border-radius:20px;
  -moz-border-radius:20px;
  -ms-border-radius:20px;
  -o-border-radius:20px;
  -webkit-border-radius:20px;
}
.menu a {
  padding:20px;
  color:#333;
  text-decoration:none;
}