JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<ul class="pager">
      <li class="pager-first first">
        <a class="active" title="到第一页" href="/css3">« 首页</a>
      </li>
      <li class="pager-previous">
        <a class="active" title="返回上一个页面" href="/css3?page=2">‹ 上一页</a>
      </li>
      <li class="pager-item">
        <a class="active" title="到第 1 页" href="/css3">1</a>
      </li>
      <li class="pager-item">
        <a class="active" title="到第 2 页" href="/css3?page=1">2</a>
      </li>
      <li class="pager-item">
        <a class="active" title="到第 3 页" href="/css3?page=2">3</a>
      </li>
      <li class="pager-current">4</li>
      <li class="pager-item">
        <a class="active" title="到第 5 页" href="/css3?page=4">5</a>
      </li>
      <li class="pager-item">
        <a class="active" title="到第 6 页" href="/css3?page=5">6</a>
      </li>
      <li class="pager-next">
        <a class="active" title="去下一个页面" href="/css3?page=4">下一页 ›</a>
      </li>
      <li class="pager-last last">
        <a class="active" title="到最后一页" href="/css3?page=5">尾页 »</a>
      </li>
    </ul>

CSS

body {
      font:12px/162% Tahoma,Arial,Helvetica,"SimSun","Arial Narrow",Geneva,sans-serif;
    }
    .pager {
      list-style: none outside none;
      margin: 20px;
      padding: 0;
      text-align: center;
    }
    
    .pager li {
      display: inline-block;
      margin: 0;
      padding: 0;
    }
    * html .pager li   { display: inline; }  
    *+html .pager  li   { display: inline; }
    
    .pager li.pager-current,
    .pager li a {
        -moz-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
        -webkit-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
      border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
        background: #232B30; /* old browsers */
        background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
        -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
        -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */ 
        box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */    
      color: #FFFFFF;
      font-size: 12px;
      margin-left: 10px;
      padding: 3px 12px;
        -webkit-transition: all 0.5s ease-in 0s;
      -moz-transition: all 0.5s ease-in 0s;
      -o-transition: all 0.5s ease-in 0s;
      transition: all 0.5s ease-in 0s;
        text-decoration: none;
        zoom:1;
    }
    
    .pager li.pager-current {
        -moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
        -webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
        border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
        color: #d54e21;
        font-weight: bold;
    }
    
    .pager li a:hover {
        -moz-border-radius:20px...