JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul>
        <li> <a href="">hello</a>

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

        </li>
        <li class="current"> <a href="">你好</a>

        </li>
        <li> <a href="">中华人民共和国中华人民共和国</a>

        </li>
        <li class="current"> <a href="">世界你好</a>

        </li>
    </ul>
</div>

CSS

/*不知什么原因，jsfiddle好像对外链的背景图片显示不出来，只能用data uri scheme来显示图片了 */
div {
    float:left;
	/*背景图片http://i.imgur.com/apsYDzC.gif */
    background:#DAE0D2 url(data:image/gif;base64,R0lGODlhFAAtAMQAAN3j1dvh0/7+/vL07ubp4Nrg0vz8/PX38vn59+rt5ODk1uXo3u7x6u3w6e/y6+Ll2vj49vf39fP18Ons4/r6+Pv7++vu53dmVePm2+Tn3f39/ezv6OHk2fHz7uDj2Ojr4iH5BAAAAAAALAAAAAAUAC0AAAXgYCGOZGmeKBmsbOu+cCzPLmDfeK7vfO/niqBwSCwaPcikEmlUcJ7Q6PNBrVqvV4x2y+12M+CweDxemM/odJqwYLvbhLh8Tq/b7/j4Z/+Z+P+AgYEJhIWGh4iJigkWjBaPkJGSkhuVlpeYGw2bnJ2engyhoqOkpaIOqKmqq6sDrq+wsbEdtLW0sq62uLuxEr6/wMHBB8TFxsfIycrGEc3Oz9DQENPU1dbWCNna29zd3t/bFOLj5OXlFejp6uvrBu7v8PHy8/TwGvf4+fr6Av3+/wADChxIsCDACwgTKly4MAQAOw==) repeat-x bottom;
    width:100%;
}
ul {
    margin:0 0 1px 0;
    padding:0;
    list-style:none;
}
li {
    float:left;
    margin:0 4px;
    padding:0px 0 0px 9px;
    float:left;
	/*左按钮http://i.imgur.com/Pr85rLq.gif */
    background:url(data:image/gif;base64,R0lGODlhCQCWAMQfALeuiO/t5eDczOzq4PHv6efk2NfSvdvWxNbRu/Tz7fv7+vb18ujl2t/by/j39NnVwuHe0PHv6PDu58W+oOvo3u3r4u7s4/n49tzYxry0kNPPt9jTv+7s5OXi1MfAo+Ll2iH5BAEAAB8ALAAAAAAJAJYAAAXw4CdCiJcBgHhMx+AoyvdoBGxDUwRfzrJoDwVvkShOGMMEISLJJHrKCMcC6BEJAUul6ktILAMKoIutUMRkM4MxVgYohQ4EUJQMChBBgy6ldBoYDwAEEhUMEIEbgwEDhwcbCIt3AgcGkViTlZeMBZSWkp2aoJ6bmZ+YoaecpKOiqKyvrquypqWptrCzqrWtu7e9uLS/sb65vMTBxcLGw7rJz8DRyNLO1MfV09nY29fdzd7M4cvjyuXQ2uDk59zf7eLm1u7q8e/r6fDo8vjs9fTz+f0A/uM38J49fQcDEtxn0B9DhA4TFoQo8KHChhUlWgoBADs=) no-repeat left top;
}
a {
    float:left;
    display:block;
    padding:4px 9px 4px 0px;
	/*右按钮http://i.imgur.com/d9Z05TH.gif */
   ...