JSFiddle - React, Tailwind, and code Playground

by sachanshih

HTML

<div class="note">
  <p>這裡是某莎的文章索引導覽區。</p>
  <p>目前還在測試階段，在這個區塊看到奇怪的物件請不必驚慌，它不會吃了你的。</p>
  </div>
<hr/>
<div class="container">
<div class="Index">
<h2>莎莎的營養學習筆記</h2>
	<label for ="tab_01">五色蔬果健康全書</label>
	<div class="box">
		<input type="checkbox" name="tab" id="tab_01">
    <div class="content">
      <ul>
        <li><a target="_blank" href="https://matters.news/@sachanshih/bafyreidm6dusy7wj6whg6r6ah4t3vn4oonidij3wspsbdp3gbdcmh75cfe">基礎知識：營養素八大類</a></li>
        <li><a target="_blank" href="https://matters.news/@sachanshih/bafyreidzeq5phhksckq3j6pf35xx4egknth2jy734wmiac6numfjhjaphu">原則份量與蔬果處理</a></li>
        <li><a target="_blank" href="https://matters.news/@sachanshih/bafyreie2n7q6aqkm5mt7uvipt2jfzzpmqp563p7voreva7yr6nxifow77e">植化素的種類：「類黃酮素」系列</a></li>
        <li><a target="_blank" href="https://matters.news/@sachanshih/bafyreief73tubmici7pwisend2cd5etq3ylehskecgfe65sqdxvmantz4u">植化素的種類：「類胡蘿蔔素」系列</a></li>
        <li><a target="_blank" href="https://matters.news/@sachanshih/bafyreidy24iqn4bcgl45xoy2qej7vvmythjdtsjva4ccgnqqhdbvbev3je">植化素的種類：「酚酸類」系列</a></li>
        <li><a target="_blank" href="https://matters.news/@sachanshih/bafyreiblwzg6lxkgckbo4xy7cyjwaq3bxgqdssajfike4l2ud3nvn2qkam">植化素的種類：「有機硫化物」系列</a></li>
        <li><a target="_blank" href="">植化素的種類：「其他」相關</a></li>
        <li><a target="_blank" href="">常見的「綠」色蔬果</a></li>
        <li><a target="_blank" href="">常見的「黃＆白」色蔬果</a></li>
        <li><a target="_blank" href="">常見的「紅＆藍紫」色蔬果</a></li>
        </ul>
      </div>
		</div>
	<label for ="tab_02" class="pre">別讓不懂營養學的醫生害了你</label>
	<div class="box">
		<input type="checkbox" name="tab" id="tab_02">
    <div class="content"></div>
		</div>
	<label for ="tab_03" class="pre">哈佛醫師教你吃對營養保健康</label>
	<div class="box">
		<input type="checkbox" name="tab" id="tab_03">
    <div class="content"></div>
		</div>
  <label for ="tab_04" class="pre">吃的營養科學觀</label>
	<div class="box">
		<input type="checkbox" name="tab" id="tab_04">
    <div...

CSS

* {
   box-sizing: border-box;
   }

body {
   margin: 0;
   padding: 0;
   background: linear-gradient(0deg,rgba(67,67,67,1) 0%,rgba(67,67,67,0.9) 20%,rgba(67,67,67,0.8) 50%,rgba(67,67,67,0.9) 80%,rgba(67,67,67,1) 100%) fixed no-repeat;
   }

.note {
  background: rgba(246,197,85,0.8);
  padding: 0.5pc 1pc;
  margin: 1pc;
  }

hr {
  border: 0;
  background: url('https://3.bp.blogspot.com/-CtKItpP5quk/Xvi-BRhRznI/AAAAAAAAAFQ/QZWjKirzwfwtKCJU4ZcSD1QjltJPPS8SgCK4BGAsYHg/s650/HR_Sakura_1000x100.png') no-repeat center center;
  height: 65px;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: start;
  padding: 0 0.25pc;
  }

h2 {
  background: linear-gradient(90deg, rgba(208,90,110,1) 0%, rgba(226,148,59,1) 25%, rgba(183,186,107,1) 50%, rgba(58,143,183,1) 75%, rgba(138,107,190,1) 100%);
  text-align: center;
  margin: 1pc;
  font-weight: bold;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  }

.Index {
  flex:1;
  width: 100%;
  margin: 0.5pc;
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.9) 10%,rgba(255,255,255,1) 100%);
  box-shadow: rgba(0,0,0,0.8) 0.5pc 0.5pc 1pc;
  }

.Index label {
   display: block;
   width: calc(100% - 1pc);
   text-align: center;
   border-radius: 0.25pc;
   background: #000;
   margin: 0.5pc auto;
   padding: 0.25pc;
   cursor: pointer;
   }

.Index label.pre {
   display: block;
   width: calc(100% - 1pc);
   text-align: center;
   border-radius: 0.25pc;
   background: #CCC;
   margin: 0.5pc auto;
   padding: 0.25pc;
   cursor: pointer;
   }

.content {
  height: 0;
  background: rgba(100%,100%,100%,0.5);
  overflow: hidden;
  transition: 0.5s;
   border-radius: 0 0 1pc 1pc;
  }

input[type=checkbox]:checked + .content {
  height: auto;
  }

input[type=checkbox] {
  display: none;
  }
ul li {
  list-style-type: decimal-leading-zero;
  list-style-position: outside;
  color: #000;
  }

a, a:active, a:visited {
 ...