JSFiddle - React, Tailwind, and code Playground

by ClarkLai

HTML

<!DOCTYPE html>
<html>
<head>

</head>
<body>
	<p class="t1">
	<a target="_blank" href="https://www.storm.mg/category/104">風生活</a>
	<a target="_blank" href="https://www.storm.mg/life-category/s28661">電影</a>
	<a target="_blank" href="https://www.storm.mg/life-category/s28667">歷史</a>
	</p>
	<h1>阿拉丁是中國人，神燈精靈最早現身於唐朝傳奇！《阿拉丁》故事中的神祕異國想像</h1>
	<p>
		<a style="color: red" target="_blank" href="https://www.storm.mg/authors/76364/%E6%9D%8E%E5%BE%8B">李律</a><a href="javascript:void(0);"><span class="t1">+追蹤</span></a>2019-06-20 11:20 <code class="t1">2665 人氣</code>
	</p>
	<p>
		<a href="https://lineit.line.me/share/ui?url=https://www.storm.mg/lifestyle/1405103?srcid=7777772e73746f726d2e6d675f64333135616464646333623831333136_1561045870">Line</a><a href="javascript:void(0);">Facebook</a>
	</p>
	<img src="https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2019/06/20/20190620-111741_U16223_M529475_6855.jpg?itok=wCZzxq7A">
	<p style="font-size:14px; color:grey">
		《阿拉丁》故事背景來自中國（圖／IMDb）
	</p>
	<blockquote>
		<p style="font-size:22px">
			<i>《一千零一夜》的作者群是巴格達皇宮裡哈里發的食客們，他們平日的工作，就是與哈里發一起用餐，在餐席中講述睿智的話語、或是講述來自阿拉伯世界或是遠自海外的各種故事。</i>
		</p>
	</blockquote>
	<p class="f1">
		<firstletter>公</firstletter>元789年，阿巴斯王朝的極盛期，世界的中心就是巴格達，世界交通最繁忙的海域就是印度洋。歐亞非大陸是整個已知世界的邊界。太平洋與大西洋的事，都是遙遠的世界邊陲，例如茹毛飲血的歐洲。
	</p>
	<p>
		把巴格達想成紐約、洛杉磯，把哈里發宮殿想成好萊塢，<b>這裡就是全世界的故事相互較勁的戰場</b>。
	</p>
	<br/>
	<p class="t2">
		阿拉丁故事來自中國
	</p>
	<p>
		阿拉丁的故事來自中國，這樣的設定來自說故事的食客，食客通常也是聽來、蒐集來的；更早的來源是往來印度洋的水手們，他們再從更遠的地方聽來的。
	</p>
	<p>
		知道阿拉丁是中國故事，值得追尋的點是，油燈在故事中的角色是甚麼？中國很早就有用燈籠照明的習慣，但中國的玻璃工藝並不發達；顯然不是類似近代歐洲的油燈照明形式。<b>而在阿拉伯故事中的版本，油燈是銅製的，很顯然也不是中國的器物</b>。
	</p>
	<br />
	<p...

CSS

<style>
body {
  margin: 10px;
  padding: 10px 100px 10px 80px;
}
p.f1::first-letter {
  font-weight: bold;
  font-size: 36px;
  text-decoration: underline red;
}
p.t1 {
  border-left: 8px solid #5599ff;
}
p.t2 {
  color: red;
}
a.t1 {
  padding; 5px;
}
span.t1 {
  font-size: 16px;
  border: 1px solid lightgrey;
  padding: 5px 12px;
  text-align: center;
  margin: 5px;
  color: black;
}
code.t1 {
  color: grey;
}
a:link {
  color: black;
  text-decoration: none;
  padding: 5px;
  font-size: 16px;
  font-weight: bold;
}
a:visited {
  color: black;
  text-decoration: none;
}
a:hover {
  color: red;
  text-decoration: underline;
}
a:active {
  color: green;
  text-decoration: underline;
}
</style>