JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
<body data-spy="scroll" data-target=".toc">
    <div id="menu">
        <ul class="menu">
            <li><a href="../main.html">首页</a>

            </li>
            <li><a href="index.html">索引</a>

            </li>
            <li><a href="../about_me.html">关于</a>

            </li>
            <li><a href="../link.html">链接</a>

            </li>
        </ul>
    </div>
    <div id="wrap">
        <div id="content">
            <div class="toc">
                <ul class="nav">
                    <li><a href="#toc_1">shell历史</a> 
                    </li>
                    <ul>
                        <li><a href="#toc_1.1">简介</a>
                        </li>
                    </ul>
                    <li><a href="#toc_2">shell如何执行命令</a>
                    </li>
                    <li><a href="#toc_3">shell的基本语法</a>
                    </li>
                </ul>
                 
            </div>
            <h1 id="toc_1" class="page">shell历史</h1>
            <h2 id="toc_1.1" class="page">简介</h2>
            <h1 id="toc_2" class="page">shell如何执行命令</h1>
            <h1 id="toc_3" class="page">shell的基本语法</shell></h1>
            </div>
        </div>
</body>

CSS

body {
    font-family:"Microsoft Yahei", "Tahoma", "Helvetica", "Arial", "SimSun", sans-serif;
    font-size: 12pt;
    line-height:1.6;
    background:#fafad2;
}
.toc {
    position:fixed;
    top:60px;
    right:5%;
    width:200px;
    overflow:auto;
    z-index:100;
    max-height:100%;
}
.toc ul li {
    font-size:12px;
    margin-bottom:5px;
    word-wrap:break-word;
    padding-left:0px;
}
.toc a {
    display:block;
    color:#4a75B5;
}
.toc .active a {
    color: red;
}

ul.menu {
    height:30px;
    line-height:30px;
    float:left;
    list-style:none;
    text-transform:inherit;
    margin-top:10px;
}
ul.menu li {
    width:100px;
    text-align:center;
    float:left !important;
    list-style-type:none;
    margin-right:2px;
}
ul.menu li a {
    width:150px;
    color:#fff;
    float:left;
    text-decoration:none;
    display:block;
}
#menu {
    position:fixed;
    background:#1a1a1a;
    height:40px;
    margin:0 auto;
    font-weight:bold;
    width:100%;
    z-index:999;
    /*固定在首部, 并且浮在表面*/
}
#wrap {
    width:60%;
    margin:auto;
    padding-left:20px;
    padding-right:30%;
    padding-top:50px;
}
#content {
    /*text-shadow:1px 1px #fff;*/
    margin-top:10px;
    font-size:10.5pt;
}
ul, li {
    padding:0;
    margin-left:15pt;
    font-family:"Arial", "DejaVu Sans", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 11pt;
}
li {
    line-height: 150%;
}

.page{
    height:400px;
}