JSFiddle - React, Tailwind, and code Playground

by kuonyuu

HTML

<div class="h-content">
  <div class="title">香港炒家網</div>
  
  <div class="nav">
    <ul>
    <li>熱炒預告</li>
    <li>熱炒新聞</li>
    <li>分門別類</li>
    <li>我要報料</li>
    </ul>
    </div>
</div>

CSS

.h-content{
  width: 100%;
  min-width: 320px;
}

.h-content .title{
  color: white;
  font-weight: bold;
  font-size:24px;
  text-shadow:0px 0px 13px #000000;
  background: #ccc;
  height: 60px;
  text-align: center;
  vertical-align: middle;
  
}

.h-content .nav{
  width: 100%;
}
.h-content .nav ul{
  list-style: none;
}
.h-content .nav li
{
  margin: 0 auto;
  display: inline-block;
}