JSFiddle - React, Tailwind, and code Playground

by philipmak

HTML

<h1><b>PhilipMak</b>的公告牌	
[]~(￣▽￣)~*</h1>
<h2>主要兩大用途，第一是把我的系列文連結整理，第二是把我的未來計劃寫下！！</h2>
<p>最後更新日期為：2021年6月15日</p>

<h3>主要糸列文</h3>
<ol style="list-style-type:cjk-ideographic">
<li>讓愛發電第二季</li>
<ul>

<li><a href="https://matters.news/@philipmak_hk/%E8%AE%93%E6%84%9B%E7%99%BC%E9%9B%BB%E7%AC%AC%E4%BA%8C%E5%AD%A3-%E4%B8%80%E7%A2%97%E7%86%B1%E8%B1%86%E6%BC%BF-%E5%9C%A8%E9%BE%8D%E5%9F%8E%E7%9A%84%E6%B7%A1%E6%B7%A1%E7%BE%A9%E9%A6%99%E4%B9%8B%E6%83%85-bafyreiagpnct6v5g76ovsstbyao4mguxz3wppoqw4lpc3uw6idlog5jtbm"target="_blank">一碗熱豆漿 - 在龍城的淡淡義香之情</a></li>

<li><a href="https://matters.news/@philipmak_hk/%E8%AE%93%E6%84%9B%E7%99%BC%E9%9B%BB%E7%AC%AC%E4%BA%8C%E5%AD%A3-%E7%85%A7%E7%89%87%E4%BD%95%E5%83%B9-%E6%95%B8%E7%A2%BC%E6%B4%AA%E6%B5%81%E4%B8%AD%E7%9A%84%E5%96%84%E7%BE%8E%E5%BD%B1%E5%AE%A4-bafyreiatofqltkp4wjyxjilxi5nrleonr5sqzh6oqw26ulwnrgl2uzsjna" target="_blank">照片何價 - 數碼洪流中的善美影室</a></li>

</ul>

<li>愛情對答</li>
<ul>
<li><a href="https://matters.news/@philipmak_hk/%E6%84%9B%E6%83%85%E5%B0%8D%E7%AD%94-%E7%9C%9F%E5%BF%83%E7%9A%84%E7%AC%91%E5%AE%B9-%E6%A5%B5%E7%9F%AD%E7%AF%87-bafyreiay2c3zgvx3zgeaxlczednrqcf7tdhtggfz4jgotxyz4lq43kx624"target="_blank">真心的笑容（極短篇）</a></li>
<li><a href="https://matters.news/@philipmak_hk/%E6%84%9B%E6%83%85%E5%B0%8D%E7%AD%942-%E5%8B%87%E6%B0%A3%E7%9A%84%E7%AC%91%E5%AE%B9-%E6%A5%B5%E7%9F%AD%E7%AF%87-bafyreihyrdrpwftabhku4rgkmzzednl7aa7e7vm7l7wh5vocwopyejsyta"target="_blank">愛情對答2 - 勇氣的笑容（極短篇）</a></li>
<li><a href="https://matters.news/@philipmak_hk/%E6%84%9B%E6%83%85%E5%B0%8D%E7%AD%943-%E7%9C%9F%E5%BF%83%E7%9A%84%E5%98%B2%E7%AC%91-%E6%A5%B5%E7%9F%AD%E7%AF%87-bafyreigwtakpoquycbhtrfh22sr5uacmjrpepuxds7qb7tkwogs2n432ai"target="_blank">愛情對答3 - 真心的嘲笑（極短篇）</a></li>
<li><a href="https://matters.news/@philipmak_hk/%E6%84%9B%E6%83%85%E5%B0%8D%E7%AD%944-%E8%83%BD%E8%B3%A3%E4%B8%8D%E8%83%BD%E8%B2%B7-%E6%A5%B5%E7%9F%AD%E7%AF%87-bafyreiex5v5xpns6l4rrtqzreslymtbohuv7peawi3r3jjz2g7lxjinie4"target="_blank">愛情對答4 - 能賣不能買（極短篇）</a></li>
<li><a...

CSS

body {
  background: #F5FFFA;
  padding: 10px 20px;
  font-family: Arial, Helvetica, sans-serif
}
h1, h2, h3  {
  font-weight: 600;
  font-family: Arial, Helvetica, sans-serif
 
}
h1 {
  font-size: 25px;
   color: #D2691E
}
h2 {
  font-size: 18px;
}
h3 {
  font-size: 16px;
  color: #191970;
}
p {
  color: #5F9EA0;
}
.word {
  margin-left: -20px;
}
.link {
  display: inline-flex;
  list-style-type: none;
  margin-left: -40px;
  margin-top: -40px;
  font-size: 14px;
  line-height: 14px;
}
.link ul {
  margin-bottom: -40px;
}
.link > .line::before {
  content:"";
  height: 100%;
  margin: 0 20px;
  border-right: solid 1px #cacaca;
}
a {
  color: #DEB887;
  text-decoration: none;
  transition: 0.5s;
}
a:hover {
  color: #DC143C;
  text-decoration: none;
}
b {
  font-weight: bold;
}