JSFiddle - React, Tailwind, and code Playground

by wen yongheng

HTML

<link rel="stylesheet" href="https://oggpmngp5.qnssl.com/mui/v3.4.0/mui.min.css">
<script src="https://oggpmngp5.qnssl.com/mui/v3.4.0/mui.min.js"></script>
<header class="mui-bar mui-bar-nav">
  <h1 class="mui-title">
  顶部选项卡-可左右拖动(div)
  </h1>
</header>
<div class="mui-content">
   <div class="mui-slider">
      <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
      <a class="mui-control-item" href="#item1">代办</a>
      <a class="mui-control-item" href="#item2">已办</a>
      <a class="mui-control-item" href="#item3">全部</a>
      </div>
      <!-- 下面进度条-->
      <div class="mui-slider-progress-bar mui-col-xs-4"></div>
      <div class="mui-slider-group">
          <div id="item1" class="mui-slider-item mui-control-content mui-active">
             <p>
             代办内容
             </p>
          </div>
          <div id="item2" class="mui-slider-item mui-control-content">
             <p>
             已办内容
             </p>
          </div>
           <div id="item3" class="mui-slider-item mui-control-content">
             <p>
             全部内容
             </p>
          </div>
          
      </div>
   </div>
</div>