JSFiddle - React, Tailwind, and code Playground

by PTbeck

HTML

<div class="title">

  <div class="title">

    <h1>物治貝克</h1>

  </div>



  <div class="subtitle">

    <p class="date">物理治療、投資理財、買房、生活日常</p>

    <p class="date">Matters圍爐：<a href="https://matters.news/~ptbeck" target="_blank">貝克的物理知聊所</a></p>

  </div>

</div>

<h2 style="text-align: left;">我是貝克，這裡是由一位物理治療師建構的國度，談物理治療，也談人生大小事</h2>

<p>索引： 2022.03.30最後更新</p>

<ol class="word">

<li>貝克的物理知聊所</li>

<ul>

<li><a href=https://matters.news/@wdrg143257/%E9%9B%BB%E7%99%82-%E7%86%B1%E6%95%B7-%E5%88%B0%E5%BA%95%E6%9C%89%E7%94%9A%E9%BA%BC%E7%94%A8-%E5%81%A5%E4%BF%9D-%E9%AB%94%E5%88%B6%E4%B8%8B%E7%9A%84-%E7%89%A9%E7%90%86%E6%B2%BB%E7%99%82-%E5%B8%AB-%E5%88%B0%E5%BA%95%E5%81%9A%E4%BA%86%E7%94%9A%E9%BA%BC-bafyreiebe6jpom2fnlurxsydsaz7ia5idywkbiqkn3b4oogn4aqwgnigoq">電療 、 熱敷 到底有甚麼用？｜ 健保 體制下的 物理治療 師 到底做了甚麼？</a></li>

<li><a href="https://matters.news/@wdrg143257/%E7%89%A9%E7%90%86%E6%B2%BB%E7%99%82%E5%B8%AB%E7%9A%84%E4%B8%8A%E7%8F%AD%E5%B0%8F%E5%A4%A5%E4%BC%B4-bafyreievuvzbr6gkepbkitfanxftitbvwvx3gegr2zcbcdf7gmpi5f3gwy">物理治療師的上班小夥伴</a></li>



</ul>

<li>貝克的物治衝鋒槍</li>

<ul>

<li><a href="https://matters.news/@wdrg143257/%E7%95%B6%E7%89%A9%E7%90%86%E6%B2%BB%E7%99%82%E5%B8%AB%E8%AA%AA-%E4%BD%A0%E5%81%9A%E7%9A%84%E6%B2%BB%E7%99%82-%E5%B0%B1%E6%98%AF%E4%B8%80%E5%A0%B4%E9%A8%99%E5%B1%80-bafyreih3deynfy64fkiv3uo2ftdjh5yolxofbin43hmslbdc4pwr6wce4i">當物理治療師說：你做的治療，就是一場騙局</a></li>



</ul>

<li>貝克想享</li>

<ul>

<li><a href="網址">名稱</a></li>



</ul>

<li>金牛貝克—投資理財系列</li>

<ul>

<li><a href="網址">名稱</a></li>





</ul>

<li>在蝸牛有殼之前—買房系列</li>

<ul>

<li><a href="網址">名稱</a></li>





  

</ol>

<ul class="link">

  <li><a href="https://matters.news/@wdrg143257" target="_blank">Matters</a></li>

  <li class="line"><a href="https://liker.social/@Ptbeck" target="_blank">Liker social</a></li>

<li class="line"><a href="https://www.potatomedia.co/user/433d089f-c937-4ede-a539-0b6385ee662e/posts" target="_blank">Potato media</a></li>

  <li class="line"><a...

CSS

font-family: Noto San TC, Muli;
}

body {
  background: #fafafa;
  padding: 0 20px;
}

h1 {
  font-size: 20px;
}

h2 {
  font-size: 14px;
  padding-bottom: 2px;
  font-weight: 500;
  color: #a37d1b;
}

h3 {
  font-size: 14px;
  font-weight: 500;
  color: #a37d1b;
}

h3 a {
  font-size: 14px;
  font-weight: 500;
  color: #a37d1b;
  text-decoration: none;
}

p {
  font-size: 16px;
}

a {
  transition: 0.4s;
}

a:hover {
  opacity: 0.5;
}

.header {
  display: flex;
  max-height: 48px;
}

.title {
  display: flex;
}

.separate {
  opacity: 0.2;
}

.subtitle {
  color: #888;
  border-left: solid 1px #e2e2e2;
  margin-left: 12px;
  max-height: 48px;
}

.date {
  font-size: 12px;
  line-height: 0.6;
  margin-left: 12px;
}

.word {
  margin-left: 6px;
  list-style-type: upper-roman;
  border-left: solid 2px #dcbf77;
  margin-bottom: 24px;
}

.word a {
  color: black;
  text-decoration: none;
  transition: 0.5s;
  line-height: 1.4;
}

.word li {
  margin-bottom: 6px;
}

.link {
  display: flex;
  list-style-type: none;
  margin-top: -10px;
  font-size: 14px;
  line-height: 14px;
}

.link li {
  color: #a37d1b;
  text-decoration: none;
  transition: 0.5s;
  display: block;
  margin: 1px 3px;
  border-radius: 8px;
  border: solid 1px #e3c57c;
}

.link a {
  color: #a37d1b;
  text-decoration: none;
  display: block;
  padding: 4px 10px 4px 8px;
  line-height: 1.6;
}

.link li:hover {
  background: #a37d1b;
  text-decoration: none;
  display: block;
  margin: 1px 3px;
  opacity: 1;
  color: white;
  border: solid 1px #a37d1b;
}

.link li:hover>a {
  color: white;
  opacity: 1;
}