JSFiddle - React, Tailwind, and code Playground

by ccyingo

HTML

<!DOCTYPE>
<html>
<head>

</head>

<body>

<!--標頭圖片-->
<a name="#" href="https://www.storm.mg/"><img id="hPic" src="https://www.storm.mg/images/logo.svg" width="160" height="60"></a>

<hr>
<!--標頭四顆-->
<div id=head>
<a class=black href="https://www.storm.mg/category/2">評論</a> <a class=black href="https://www.storm.mg/category/117">國際</a> <a class=black href="https://www.storm.mg/category/118">政治</a> <a class=black href="https://www.storm.mg/category/88881">專欄</a>
</div>

<!--標題-->
<h1>何志勇觀點：政治人物的「接地氣」只是一場秀</h1>

<!--標題下一行連結-->
<div id=secondHead><a class=red href="https://www.storm.mg/authors/157436/%E5%A5%94%E9%A8%B0%E6%80%9D%E6%BD%AE">奔騰思潮</a>  <a class=red href="https://www.storm.mg/authors/161686/%E4%BD%95%E5%BF%97%E5%8B%87">何志勇</a> <a class=b1 href="https://www.google.com.tw/">+追蹤</a> 2019-07-26 06:50 <span id=s1>人氣1655</span></div>

<!--圖片1+小灰字?-->
<div class=p1Word>
<img src="https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2019/03/03/20190303-030946_U9386_M502762_9e62.jpg?itok=oI6Ykd23">
<p style="line-height: 1.4;">台北市長柯文哲出訪以色列返時，在官方臉書Po出一張在以色列機場席地而坐充電的照片，引發網友熱議。
<br>（取自柯文哲臉書)
</p>
</div>

<!--正文-->
<div id=screen>
<p class=pa><span class=first>在</span>新媒體的浪潮下，不少政治人物訴諸異於傳統、保守的政治語言，建立「接地氣」、說話直白的形象，來博取特定選民的認同，其中不乏出現一些無濟於事、譁眾取寵和睜眼說瞎話的言行，卻往往成為媒體的焦點，甚至企圖引導輿論。美國總統川普日前在推特上要求四位民主黨籍少數族裔的女議員滾回「她們的祖國」，反令他在黨內支持率上升，就是一個例子。在臺灣，隨著明年大選選戰增溫，類似這種「反智」（anti-intellectualism）說渾話的現象，亦所在多有。</p>

<p class=pa>簡言之，「反智」種是反菁英主義（anti-elitism）的表現，認為專業知識不能解決現實的問題，菁英當權也無法體恤民情。一旦社會中「反智」現象盛行，就可能導致民粹主義當道。但曾有研究發現，過去不少共和黨籍的美國總統，舉凡五星上將艾森豪、好萊塢演員出身的雷根，以及從名校耶魯畢業的小布希等，都會佯裝成「反智」的行事風格，一來是能藉此凸顯他們是和百姓站在一起，進而從中獲得更多的支持，二來是降低政治對手的心防，以攻其不備。例如小布希總統曾在公開場合揶揄他的國政顧問雖有教授頭銜和博士學位，但當總統做決定的卻是他這個不用功的「C咖學生」，並反問臺下聽眾是否悟出其中道理。</p>

<p class=pa>但我們必須認清，這些美國總統本身無疑就是菁英，他們並非真正的「反智」，而是力求精彩演出（spectacle）來滿足觀眾。在這個過程中，他們先形塑有利於自己（無論是當權或在野）的輿論氛圍，然後再遂行其目的，惟後果並非都能如願，更不見得對國家有利。以小布希為例，在9/11事件之後，他挾著經過政府刻意操作愛國主義後而高漲的民意，發動了全球反恐戰爭，先後入侵阿富汗和伊拉克，結果卻造成美國往後廿年陷入戰爭的泥沼，損失慘重，其中他發動伊拉克戰爭的動機至今仍備受質疑。</p>

<p...

CSS

img#hPic{
  display: block;
  margin: auto;
}

body{
  background-color: #f2f2f2;
  font-family: "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  padding: 15px;
}

#head{
  margin-top:30px;
  border-left: 10px solid red;
  padding: 9px;
  font-weight: bold;
  word-spacing: 10px;
}

/* 頭頂四顆 */
a.black:link{
  color: black;
  text-decoration: none;
}
a.black:visited{
  color: black;
  text-decoration: none;
}
a.black:hover{
  text-decoration: underline;
}
a.black:active{
  text-decoration: none;
  background-color: #DCDCDC;
}

h1{
  color: #666666;
  font-weight: bold;
}

#s1{
  color: #666666;
}


#secondHead{
  font-weight: bold;
  word-spacing: 10px;
}

/* 奔騰紅字 */
a.red:link{
  color: red;
  text-decoration: none;
}
a.red:visited{
  color: red;
  text-decoration: none;
}
a.red:hover{
  text-decoration: underline;
}
a.red:active{
  text-decoration: none;
  background-color: #DCDCDC;
}

/* 小灰按鈕 */
a.b1:link{
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  padding: 8px 16px;
  color: black;
  background-color: white;
  text-decoration: none;
}
a.b1:visited{
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  padding: 8px 16px;
  color: black;
  background-color: white;
  text-decoration: none;
}
a.b1:hover{
  
  border-radius: 5px;
  background-color: #bfbfbf;
  padding: 8px 16px;
  color: white;
  text-decoration: none;
}
a.b1:active{
  
  border-radius: 5px;
  background-color: #bfbfbf;
  padding: 8px 16px;
  color: white;
  text-decoration: none;
}

/* 圖片+灰字div */
div.p1Word{
  margin: 50px 0px;
  color: #bfbfbf;
  font-weight: bold;
}

/* 正文大框框 */
#screen{
  background-color: white;
  margin: 20px;
}

p.pa{
  line-height: 1.6;
  letter-spacing: 1px;
  color: #404040;
  font-weight: bold;
  margin: 30px;
  font-size: 20px;
}

.GrayWordPic{
  color: #bfbfbf;
  font-size: 16px;
  font-weight: bold;
}

.GrayP{
  color: #b3b3b3;
}

/* 最後底線 */
a.b2:link{
  color: #b3b3b3;
  text-decoration: none;
  border-bottom: 1px solid #ffa64d;
}
a.b2:visited{
 ...