JSFiddle - React, Tailwind, and code Playground

by leungyi

HTML

<h1>梁懿</h1>
<h2>SesameBeans.</h2>
<h3>不定期更新的公告文</h3>
<ol class="word">

<h4>廣東歌單</h4>
<h5><a href="填入你的網址" target="_blank">。網址名稱</a></h5>

<h4>斜槓職場</h4>
<h5><a href="https://matters.news/@leungyi/%E6%B2%92%E6%9C%89%E6%B0%B8%E9%81%A0%E7%9A%84%E5%B7%A5%E4%BD%9C-%E4%BD%86%E6%9C%89%E6%B0%B8%E9%81%A0%E7%9A%84%E8%83%BD%E5%8A%9B-bafyreic6itpomcn4ln6xsynxj6fxtqkrwilhejf4ruli7zpcvbfhb7olom" target="_blank">。沒有永遠的工作，但有永遠的能力。</a></h5>
<h5><a href="https://matters.news/@leungyi/%E5%88%A5%E8%A6%81%E5%BE%9E%E6%96%9C%E6%A7%93%E9%9D%92%E5%B9%B4%E8%AE%8A%E4%B8%8B%E6%B5%81%E8%80%81%E4%BA%BA-bafyreibphxv542e7vko36pmkwshg3blfezqyvhdke7gjr25wqwit2hlwyi" target="_blank">。別要從斜槓青年變下流老人</a></h5>
<h5><a href="https://matters.news/@leungyi/%E8%87%AA%E7%94%B1%E5%B7%A5%E4%BD%9C%E8%AA%8C-%E6%9C%9D9%E6%99%9A9%E4%BE%BF%E6%98%AF%E4%B8%8A%E9%80%B2-%E6%9C%89%E4%B8%80%E4%BB%BD%E5%85%A8%E8%81%B7%E4%BE%BF%E6%98%AF%E5%AE%89%E7%A9%A9-bafyreihjngxwqmgdggy5s6hwfhu2fglnxyngfnecosxlzwiibu44kvs42m" target="_blank">。朝9晚9便是上進，有一份全職便是安穩？</a></h5>
<h5><a href="。填入你的網址" target="_blank">網址名稱</a></h5>
 
 <h4>設計</h4>
<h5><a href="填入你的網址" target="_blank">。網址名稱</a></h5>
<h5><a href="填入你的網址" target="_blank">。網址名稱</a></h5>
<h5><a href="填入你的網址" target="_blank">。網址名稱</a></h5>

<h4>時裝過客</h4>
<h5><a href="https://matters.news/@leungyi/%E7%AB%8A%E5%9C%96%E7%AE%97%E6%98%AF%E5%81%B7%E5%97%8E-%E5%BE%9E%E6%99%82%E8%A3%9D%E5%91%A8%E8%AA%AA%E8%B5%B7-bafyreiex5pejv6t5mpjnbiqmcdcjmj2pecq5k2mgitwbrwuoqqw3grb5vu" target="_blank">。竊圖算是偷嗎？從時裝周說起</a></h5>
<h5><a href="https://matters.news/@leungyi/%E5%B0%8A%E9%87%8D%E5%88%A5%E4%BA%BA%E7%9A%84%E7%A9%BF%E8%A1%A3%E9%A2%A8%E6%A0%BC-bafyreibz3jzc4ymomzakhhfgjznzp24bcgqapx7mdrrhdpjkdob7llij2a" target="_blank">。尊重別人的穿衣風格</a></h5>
<h5><a href="bafyreidv6ra245daleru5wssdb254b5ugtu5uulqkrat5hs33vpuybolle" target="_blank">。我的第一次｜2008年首次去巴黎時裝周稱</a></h5>
<h5><a...

CSS

body {
  background: #fafafa;
  padding: 10px 20px;
}
h1, h2, h3  {
  font-weight: 600;
}
h1 {
  font-size: 20px;
}
h2 {
  font-size: 18px;
}
h3 {
  font-size: 16px;
  color: #4d92eb;
}
p {
  color: #888;
}
.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: #4d92eb;
  text-decoration: none;
  transition: 0.5s;
}
a:hover {
  color: #4079c3;
  text-decoration: none;
}