JSFiddle - React, Tailwind, and code Playground

by booktu8

HTML

<div class="box w">
<div class="code-hd">
<h3>
精品推荐
</h3>
<ul>
<li><a href="#">初级</a></li>
<li><a href="#">中级</a></li>
<li><a href="#">高级</a></li>
</ul>
<a class="more" href="#">查看全部</a>
</div>
<div class="code-bd">
<div class="left">
</div>
<div class="right">
<div class="right-hd"></div>
<ul class="right-bd">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>

CSS

*{
  margin:0;
  padding:0;
}
li{
  list-style:none;
}
a{
  color:#000;
  text-decoration:none;
}
.w{
  width:500px;
  margin:0 auto;
}
.code-hd{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 0;
}
.code-hd ul{
  font-size:0;
}
.code-hd ul li{
  display:inline-block;
  padding:0 15px;
}
.code-hd ul li a{
  font-size:16px;
}
.more{
  margin-right:30px;
  font-size:12px;
}
.code-bd{
  display:flex;
}
.left{
  width:100px;
  height:200px;
  background-color:pink;
}
.right{
  flex:1;
}
.right-hd{
  height:50px;
  background-color:red;
}
.right-bd li{
  width:70px;
  height:140px;
  background-color:#000;
  display:inline-block;
}