JSFiddle - React, Tailwind, and code Playground

by boom017o

HTML

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>
<a class="toptitle" id="政治" href="https://www.storm.mg/category/118">政治</a>
<h1 style="background-color:rgb(240, 240, 240); font-size:36px;font-family:Microsoft JhengHei;">
BNT先給青少年打？青壯年網友心寒：可憐！繳稅主力活該當韭菜
</h1>
<a class="below" id="陳煜" href="https://www.storm.mg/authors/1157/%E9%99%B3%E7%85%9C">陳煜</a>
<a class="below" id="追蹤" href="http://www.google.com.tw">＋追蹤</a>
<p class="below">
2021-07-13 15:34
</p>
<p class="below" style="color:gray;">
22693 人氣
</p>
<p class="body" id="內文">
<span>
台積電、鴻海集團成功購入1000萬劑BNT疫苗，由於現有AZ及莫德納疫苗接種對象都不包括12至18歲青少年，指揮中心指揮官陳時中12日稱，若沒有其他疫苗可選，BNT疫苗將先保留給青少年接種，消息引爆兩極熱議。對此，大批20至50歲的青壯年網友強烈不滿，心寒直呼「勞動階層就該死」、「繳稅主力青壯年不是人嗎」、「病毒會自律，認真上班的韭菜不會得病毒」。
<br/>
<br/>
<a href="https://storm.waca.store/product/detail/784144/vegetable001?utm_source=contentpost">【熱銷蔬菜箱補貨！】 嚴選5大類12種品項蔬菜產地直送到家</a>
<br/>
<br/>
針對BNT疫苗分配，陳時中昨天說明，中央規劃將疫苗施打在最適合的族群上，由於現有AZ疫苗及莫德納疫苗並未開放給12至18歲青少年接種，而國外已開放BNT疫苗給青少年接種，屆時將會先保留BNT疫苗給青少年施打。
<br/>
<br/>
消息曝光後，迅速在PTT上<a href="https://www.ptt.cc/ask/over18?from=%2Fbbs%2FGossiping%2FM.1625994234.A.FFE.html">引爆熱議</a>，網友紛紛留言「經濟主力都不用打就是了」、「青壯年就是活該當韭菜是吧」、「繳稅主力青壯年不是人嗎」、「繳稅給政府亂花，疫苗和補助都沒份」、「上班族要負責繳稅，但是不用打疫苗」、「可憐哪，繳稅主力活該當韭菜」、「上班群聚視而不見，還最後打疫苗，慘」、「可憐的賺錢主力，繳稅的是這群，現在連學生都能插隊」。（相關報導：
<a href ="https://www.storm.mg/article/3792225AZ" style=red; >莫德納疫苗副作用一次看！常見疲倦、發燒 若有「這些症狀」快就醫</a>
｜更多文章
<br/>
<br/>
還有網友質疑「那當初堅持不買BNT是放棄青少年的接種？」、「那這批BNT前政府對學生族群的規劃是？」也有網友心寒嘆道「你各位繳稅魯乖乖等高端吧」、「上班族當然打高端聯亞啊，難道你們不愛台？」、「主力只有AZ跟高端了」、「上班族只能打高端聯亞」、「高端保留給韭菜們」。 
</span>
</p>
</body>
</html>

CSS

#政治 
{ /* 紅色線 */
  padding-left: 10px;
  border-left: 8px solid red;
}
#陳煜:link, #陳煜:visited{ /* 字體紅色 */
    color: red;
    text-decoration: none;
  }
#陳煜:hover, #陳煜:active { /* 移動到上面會有底線 */
    text-decoration: underline;
  }
#追蹤:link, #追蹤:visited{
  color: black;
  padding: 5px 10px; /* 高 寬 */
  border: 1px solid black;
  text-align: center;
  display: inline-blick;
  text-decoration: none;
  border-radius: 5px; /* 外框圓弧 */
}
.below {
  padding: 0px 5px;
  display: inline;
  white-space: nowrap;/* 不換行 */
}
body
{  /* 背景 */
  background-color: rgb(240, 240, 240);
}
#內文::first-letter 
{  /* 首字大寫 */
  font-weight: bold;
  font-size: 36pt;
}
#內文
{  /* 內文白底 */
  height: 900px;
  width: 500px;
  margin-top: 20px; /* 邊界 */
  margin-bottom: 20px;
  margin-right: 10px;
  margin-left: 10px;
  padding-top: 10px; /* 與框線距離 */
  padding-bottom: 10px;
  padding-right: 50px;
  padding-left: 50px;
  background-color: rgb(255, 255, 255);
  border-style: none;
  font-family: Sans-serif;
  font-size: 20px;
}

a:link {
  color: gray;
}

/* visited link */
a:visited {
  color: gray;
}

/* mouse over link */
a:hover {
  color: gray;
}

/* selected link */
a:active {
  color: gray;
}