Edit in JSFiddle

<ul class="tabs">
    <li>
        <input type="radio" name="tabs" id="tab1" checked />
        <label for="tab1">引言</label>
        <div id="tab-content1" class="tab-content">
          <p>網際網路在我們生命中的重要性日漸增加。
<p>Mozilla 專案為全球性社群，成員們信奉開放、創新及機會是網際網路健全發展的關鍵因素。我們自 1998 年起為確保網際網路的發展裨益全民而生，以創作 Mozilla Firefox 網頁瀏覽器聞名。

<p>Mozilla 專案以社群力量建立世界一流的開放源碼軟體，並開創各種新式的合作活動；成員們志同道合，為了提昇全民的網路體驗而努力。 
        </div>
    </li>
    <li>
        <input type="radio" name="tabs" id="tab2" />
        <label for="tab2">目的</label>
        <div id="tab-content2" class="tab-content">
          <p>
1.闡明 Mozilla 參與者們希望 Mozilla 基金會追求的網際網路願景；<br>
2.對大眾宣揚理念，無論對方是否為技術背景出身；<br>
3.讓 Mozilla 的貢獻者們以我們的行為為傲，並激勵我們繼續努力；<br>
4.提供其他人推動網際網路朝此願景邁進的準則
<p>有了理念，還待人來實踐；需要以個人努力、團體合作並發揮領導作用，來維持網際網路的開放參與。Mozilla 基金會承諾推行 Mozilla 宣言裡的理念，也邀請更多夥伴加入我們的行列、致力令網際網路變得更好。 
          </p>
        </div>
    </li>  
    <li>
        <input type="radio" name="tabs" id="tab3" />
        <label for="tab3">邀請</label>
        <div id="tab-content3" class="tab-content">
          <p>Mozilla 基金會邀請支持此宣言理念的眾人，一同探索實踐這份網際網路願景的新方法 </p>
        </div>
    </li>
</ul>

body {
  text-align: left;
  color: #424F5A; 
  background: #D7D3C8;  
}
.tabs {
  padding: 0;
  width: 380px;  
  float: none;
  list-style: none;
  position: relative;
  margin: auto;
  text-align: left;
}
.tabs li {
    float: left;
    display: block;
}
.tabs input[type="radio"] {
    position: absolute;
    display: none;
}
.tabs label {
    display: block;
    padding: 14px 21px;
    font-size: 20px;
    background: #AAA;
    cursor: pointer;
    position: relative;
    top: 4px;
    width: 50px;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.tabs label:hover {
    background: #CCC;
}
.tabs .tab-content{
    z-index: 2;
    display: none; 
    overflow: hidden;
    width: 100%;
    font-size: 17px;
    line-height: 25px;
    position: absolute;
    top: 52px;
    left: 0; 
    background: #FFF;
}
.tabs .tab-content p{
    padding: 0 20px;
}
.tabs [name="tabs"]:checked + label { 
    top: 0;
    padding-top: 17px; 
    background: #FFF; 
}
.tabs [name="tabs"]:checked ~ .tab-content {
    display: block;
}

@media only screen and (max-width: 400px) {
  .tabs {
    width: 100%;
  }
  .tabs li {
    float: none;
    margin-top: 20px;
  }
  .tabs .tab-content {
    position: relative;
    display: block;
    top: 0;
  }
  .tabs label {
    top: 0;
    padding-top: 17px; 
    background: #FFF;       
  }
  .tabs label:hover {
    background: #FFF;
  }
}