JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Alice 的简单例子</title>
<link media="all" href="https://a.alipayobjects.com/alice/one/1.2.2/one.css" rel="stylesheet">
<style>
.wrapper {
width: 990px;
margin: 0 auto;
}
h1 {
font-size: 26px;
}
.ui-grid-row {
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="ui-grid-row">
<div class="ui-grid-25">
<h1>这是一个简陋的页面</h1>
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-25">
<div class="ui-nav">
<ul class="ui-nav-main">
<li class="ui-nav-item">
<a href="#">一级导航 1</a>
<ul class="ui-nav-submain">
<li class="ui-nav-subitem ui-nav-subitem-current"><a href="#">二级导航 1-1</a></li>
<li class="ui-nav-subitem"><a href="#">二级导航 1-2</a></li>
<li class="ui-nav-subitem"><a href="#">二级导航 1-3</a></li>
</ul>
</li>
<li class="ui-nav-item ui-nav-item-current">
<a href="#">一级导航 2</a>
<ul class="ui-nav-submain">
<li class="ui-nav-subitem"><a href="#">二级导航 2-1</a></li>
<li class="ui-nav-subitem ui-nav-subitem-current"><a href="#">二级导航 2-2</a></li>
<li class="ui-nav-subitem"><a href="#">二级导航 2-3</a></li>
</ul>
</li>
<li class="ui-nav-item">
<a href="#">一级导航 3</a>
<ul class="ui-nav-submain">
<li class="ui-nav-subitem"><a href="#">二级导航 3-1</a></li>
...