JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div id="topbar" class="">
<div class="wp">
<div class="hd_logo"> <h2><a href="#" title=""></a></h2></div>
<div class="nav">
<ul>
<li><a href="#" target="_self">Note Edge</a></li>
<li><a href="#" target="_self">Note Edge</a></li>
<li><a href="#" target="_self">Note Edge</a></li>
<li><a href="#" target="_self">Note Edge</a></li> 
<li><a href="#" target="_self">Note Edge</a></li>
<li><a href="#" target="_self">Note Edge</a></li>
<li><a href="#" target="_self">Note Edge</a></li>
<li><a href="#" target="_self">Note Edge</a></li> 
</ul>
</div>
    
<div id="scbar" class="cl">
<form id="scbar_form" method="post" autocomplete="off" onsubmit="searchFocus($('scbar_txt'))" action="search.php?searchsubmit=yes" target="_blank">
<input type="hidden" name="mod" id="scbar_mod" value="forum">
<input type="hidden" name="formhash" value="c8b76941">
<input type="hidden" name="srchtype" value="title">
<input type="hidden" name="srhfid" value="0">
<input type="hidden" name="srhlocality" value="portal::list">
<table cellspacing="0" cellpadding="0">
<tbody><tr>
<td class="scbar_txt_td"><input type="text" name="srchtxt" id="scbar_txt" value="请输入搜索内容" autocomplete="off" x-webkit-speech="" speech="" class=" xg1" placeholder="请输入搜索内容"></td>
<td class="scbar_type_td"><a href="javascript:;" id="scbar_type" class="xg1" onclick="showMenu(this.id)" hidefocus="true">帖子</a></td>
<td class="scbar_btn_td"><button type="submit" name="searchsubmit" id="scbar_btn" sc="1" class="pn pnc" value="true"></button></td>
</tr>
</tbody></table>
</form>
</div>

<div class="userbox"> 
<ul class="usernav user_part">
<li class="user_list"><a href="javascript:;" onclick="javascript:lsSubmit();" class="user_link login">登录</a></li>
<li class="user_list"><a href="member.php?mod=register" class="user_link">注册</a></li>
<li class="user_list" style="width: 12px; margin: 18px 10px 0 8px; overflow: hidden;"><a href="portal.php?mod=rss" class=" user_link rss_top" title="订阅"></a></li>
</ul>
</div>
<div class="header ">
<div...

CSS

.header {
min-height: 40px;
}

#topbar {
width: 100%;
height: 50px;
line-height: 50px;
border-bottom: 0;
background: #333;
}

.wp, .time_con {
width: 1000px;
margin: 0 auto;
}

.hd_logo {
float: left;
width: 100px;
height: 50px;
display: block;
margin: 0 15px 0 0;
overflow: hidden;
}

.nav {
float: left;
width: 430px;
height: 50px;
overflow: hidden;
}

.nav li {
float: left;
}

ul li, .xl li {
list-style: none;
}

#scbar {
float: right;
height: 50px;
line-height: 48px;
margin: 0;
border: 0;
overflow: visible;
background: #1EA9BE;
}

html, body, div, h1, h2, h3, h4, h5, h6, p, img, dl, dt, dd, ol, ul, li, form, table, tr, th, td {
margin: 0;
padding: 0;
border: 0;
}

.userbox {
float: right;
height: 50px;
line-height: 50px;
margin: 0 10px 0 0;
}

.usernav {
float: left;
height: 50px;
overflow: hidden;
}

.usernav .user_list {
float: left;
position: relative;
overflow: hidden;
}

.user_link {
display: block;
padding: 0 8px;
height: 50px;
line-height: 50px;
color: #CCC;
display: inline-block;
}

.usernav .user_list {
float: left;
position: relative;
overflow: hidden;
}

.hdr {
min-height: 40px;
_height: 40px;
border-bottom: 0;
box-shadow: 0px 1px 2px #E4E4E4;
background: #FFF;
}

.wp1020 {
width: 1000px;
margin: 0 auto;
}

.btm {
height: 40px;
line-height: 40px;
padding-top: 0;
background: #FFF;
}

.btm ul li {
float: left;
background: url(http://210.209.84.11/demo/netech/template/win8mi_2nd_tech/src/top-border.jpg) no-repeat scroll right center rgba(0, 0, 0, 0);
}

.btm ul li a {
float: left;
padding: 0 12px;
font-family: "Microsoft Yahei";
font-size: 12px;
color: #666;
}