JSFiddle - React, Tailwind, and code Playground

by philipmak

HTML

<h1><b>PhilipMak</b>的簽名檔
*~(￣▽￣)~*</h1>
<h2>如喜歡，請拍手支持，不要懲罰開源，支持共學共享！</h2>
<p>最後更新日期為：2021年9月24日</p>

<h3>主要糸列文</h3>
<ol style="list-style-type:cjk-ideographic">
<li>讓愛發電第二季</li>
<li>愛情對答</li>
<li>三碗細牛腩麵點播</li>
<li>數位斷捨離</li>
<li>重温失敗系列</li>
<li>馬特市物語</li>
</ol>

<h3>未來書寫計劃</h3>
<ol style="list-style-type:cjk-ideographic">
<li>更新數位斷捨離</li>
<li>馬特市傳奇連載【暫停更新】</li>
<li>三碗細牛腩麵點播站</li>
</ol>

<p>這裡會不定時更新，希望大家多多支持！ꉂ ೭(˵¯̴͒ꇴ¯̴͒˵)౨”</p>

<ul class="link">
<li class="line">
<li><a href="https://sswisdom.com" target="_blank">Visit個人專頁</a></li>
<li class="line">
<li><a href="mailto:[email protected]">Email me</a></li>
<li class="line">
<li><a href="https://liker.land/philipmak/civic" target="_blank"> 歡迎每月支持我用文字記錄世界和改變大家！(=´∀｀)人(´∀｀=) </a></li>
<li class="line">
<li>©philipmak</li><li class="line"></li>
<li>
  
</li>
</ul>

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;
}