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 mui-row mui-fullscreen">
  <div class="mui-col-xs-3">
  <div class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
  <a href="#item1" class="mui-control-item mui-active">列表1</a>
  <a href="#item2" class="mui-control-item">列表2</a>
  <a href="#item3" class="mui-control-item">列表3</a>
  </div>
  </div>
  <div class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">
     <div id="item1" class="mui-control-content mui-active">
     <p>
     内容1
     </p>
     </div>
     <div id="item2" class="mui-control-content">
     <p>
     内容2
     </p>
     </div>
     <div id="item3" class="mui-control-content">
     <p>
     内容3
     </p>
     </div>
  </div>
</div>

CSS

.mui-row.mui-fullscreen>[class*="mui-col-"] {
				height: 100%;
			}
			.mui-col-xs-3,
			.mui-control-content {
				overflow-y: auto;
				height: 100%;
			}
			.mui-segmented-control .mui-control-item {
				line-height: 50px;
				width: 100%;
			}
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				background-color: #fff;
			}