JSFiddle - React, Tailwind, and code Playground

by booktu8

HTML

<div class="wrapper">
<header>
  <h1>This is the article footer text ,这是页眉的内容.</h1>
</header>

<ul class="nav">
  <li><a href="javascript:;">Link 1</a></li>
  <li><a href="javascript:;">Link 2</a></li>
  <li><a href="javascript:;">Link 3</a></li>
</ul><div class="content">
  <div class=inner>
      <h1>第一标题</h1>
    <p>第一段落</p>
     <h2>第一标题</h2>
    <p>第二段落</p>
  </div>
  </div><div class="aside">
    <h3>这是侧边栏</h3>
    <p>这是一个段落</p>
  </div>

  <footer>
    <p>This is the article footer text ,这是页脚的内容.</p>
  </footer>
</div>

CSS

*{
  padding:0;
  margin:0;
}
.wrapper{
  width:400px; 
  margin:0 auto;
  border:1px solid;
  overflow:hidden;
}
header{
   background:red;
}
.content{
  width:200px;
 display:inline-block;
  vertical-align:top;
  background:yellow;
  display:
}
.inner{
  border:1px solid gray;
  margin:5px 10px;
  padding:5px;
}
.nav{
  width:100px;
 list-style:none;
   display:inline-block;
   vertical-align:top;
  background:gray; 
}
.aside{
  width:100px;
  display:inline-block;
   vertical-align:top;
   background:green; 
   padding:10px;
   box-sizing:border-box;
}
footer{
  clear:both;
   background:yellowgreen;
}