JSFiddle - React, Tailwind, and code Playground

by hannahtest190619

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>My Second Homework</title>
    <meta charset="UTF-8">
  </head>

  <body>
   <p class="icon"><strong>CROSSING</strong></p>
   <div class="b1"></div>
    <h1>「外派年薪百萬」神話不再？技術傲人的台灣紡織業，面對怎樣的生存困境？</h1>
    <div class="b2"><p class="b2"><strong>2019.06.14</strong></p></div>
    <div class="b02"><a class="link001" href="https://crossing.cw.com.tw/blogIndividual.action?id=742">Lan Ying Pin／柬埔寨隨記</a></div>
    <div class="b3"><p class="b3">「我下個月離職回台，有空吃個飯。」我看著T哥傳來的訊息，驚訝不已。</p></div>
    <div class="b4"><p class="b4">T哥是我一來柬埔寨時就認識的朋友，在一次成衣工廠的陌生拜訪中相識，因為趣味相投，所以很常聚在一起。當這位有7年經驗的學長說要離職，一定有甚麼非常特殊的原因，因此當下馬上回 覆，約好飯局的時間。</p></div>
    <div class="b5"><p class="b5"><strong>薪資制度設計，變相懲罰年輕人</strong></p></div>
    <div class="b6"><P class="b6">「好久不見，還是一樣瀟灑啊。」遠遠的從餐廳門口就看到了T哥，我打了聲招呼，坐在T哥對面。</P></div>
    <div class="b7"><p class="b7">T哥搖了搖手中的飲料，說道：「我知道你想問甚麼。」說完笑了笑，「為什麼我要提離職，對吧？」我點點頭。T哥嘆了口氣，說道，「你知道我們公司現在開給新鮮人的薪水，一個月不到4萬塊嗎？」</p></div>
    <div class="b8"><p class="b8">聽到這個訊息，我倒抽了一口氣。T哥工作的成衣廠規模中等，整個工廠約有30個台幹，照理說薪資待遇應該還在業界平均。之前略有聽說台灣紡織外派的薪水不斷下調，沒有想到已經低到這個程度。</p></div>
    <div class="b9"><p class="b9">「準確來說，新人第1年的月薪會不滿4萬，然後第2年、第3年逐年調高，<strong>如果能撐到第4年，會調到6萬左右──這個制度的設計，其實是在獎勵能撐下來的人。但換句話說，是變相地在懲罰年資淺的新人。</strong>」我點點頭，這句話的確中肯。</p></div>
    <div class="b10"><p class="b10">在2002年台灣紡織業開始往東南亞外派新鮮人的時候，薪水多在6萬至7萬之間，就算是小廠也有5萬之譜。當時曾有不少相關採訪，指出若夫妻兩人一起工作存錢，幾年後就可以付買房頭期款的<a class="link01" href="https://www.cheers.com.tw/article/article.action?id=5025198">報導</a>，沒想到如今似乎榮景不再，且每況愈下</p></div>
      <div class="b11"><img src="https://storage.googleapis.com/crossing-cms-cwg-tw/ckeditor/201906/ckeditor-5d02fd4decb08.jpg" alt="Operator" width="610" height="450"></div>
      <div class="b12"><p class="b12">圖／Shutterstock</p></div>
      <div class="b13"><p class="b13"><strong>新人超高陣亡率背後，產業困境與惡性循環</strong></p></div>
      <div class="b14"><p...

CSS

body {
  padding: 20px 20px 20px;
}
p.icon {
  font-size: 25px;
  background-color: black;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
}
.b1 {
  border-top: 3px solid black;
 }
 .b2 {
    border-left-style: solid;
    border-left-color: red;
    border-left-width: 5px;
  }
   .b02 {
    border-left-style: solid;
    border-left-color: blue;
    border-left-width: 10px;
  }
 a.link00: link , a.link00: vsited{
    text-decoration: none;
    color: green;
  }
 a.link00: hover, a.link00: active{
    text-decoration: underline;
    color: hot-pink;
  }
  .b3 {
    padding: 0px 5px 0px;
  }
  .b4 {
    padding: 0px 5px 0px;
  }
  .b5 {
    padding: 0px 5px 0px;
    color: tomato;
  }
  .b6 {
    padding: 0px 5px 0px;
  }
  .b7 {
    padding: 0px 5px 0px;
  }
  .b8 {
    padding: 0px 5px 0px;
  }
  .b9 {
    padding: 0px 5px 0px;
  }
  .b10 {
    padding: 0px 5px 0px;
  }
  a.link01: link , a.link01: visited{
    text-decoration: none;
    color: green;
  }
  a. link01: hover , a.link01: active{
    text-decoration: underline;
    color: tomato;
  }
  .b11 {
    padding: 0px 5px;
  }
  .b12 {
    color: grey;
    font-size: 12px;
    text-align: center;
  }
  .b13 {
    padding: 0px 5px;
    color: tomato;
  }
  .b14 {
    padding: 0px 5px;
  }
   .b15 {
    padding: 0px 5px;
  }
   .b16 {
    padding: 0px 5px;
  }
    .b17 {
    padding: 0px 5px;
  }
    .b18 {
    padding: 0px 5px;
  }
  .b19 {
    padding: 0px 5px;
  }
  a.link02: link , a.link02: visited{
    text-decoration: none;
    color: green;
     }
  a.link02: hover , a.link02: active{
    text-decoration: underline;
    color: tomato;
     }
   .b20 {
    padding: 0px 5px;
    color: tomato;
  }
    .b21 {
    padding: 0px 5px;
  }
    .b22 {
    padding: 0px 5px;
  }
    .b23 {
    border-left-style: solid;
    border-left-color: red;
    border-left-width: 5px;
  }
    .b24 {
    border-left-style: solid;
...