JSFiddle - React, Tailwind, and code Playground

by sachanshih

HTML

<div class="note">
<p><span class="hot">紅底標籤醒目字樣</span>黃色便利貼展示文字</p>
</div>

<div class="container">

<div class="Index"><!-- 左邊的 Index 區域開始 -->
  <h2>左邊的彩虹文字便利貼標題</h2>
  <label for ="tab_Name1">左邊的黑底收合標籤標題</label>
  <div class="box">
    <input type="checkbox" name="tab" id="tab_Name1">
    <div class="content">
      <div class="tip">收合標籤內的灰櫻底色小提示文字</div>
      <ul class="Name1_list">
        <li><a target="_blank" href="連結網址1">連結標籤名稱1</a></li>
        <li><a target="_blank" href="連結網址2">連結標籤名稱2</a></li>
        <li><a target="_blank" href="連結網址3">連結標籤名稱3</a></li>
      </ul>
    </div>
  </div>
  <label for ="tab_More">其他標籤</label>
  <div class="box">
    <ul>
      <li class="special">
        <a target="_blank" href="特殊連結網址">特殊連結標籤名稱</a>
      </li>
      <li><a target="_blank" href="連結網址">連結標籤名稱</a></li>
    </ul>
  </div>
</div><!-- 左邊的 Index 區域結束 -->

<div class="Index"><!-- 右邊的 Index 區域開始 -->
  <h2>右邊的彩虹文字便利貼標題</h2>
  <label for ="tab_01">右邊的黑底收合標籤標題1</label>
  <div class="box">
    <input type="checkbox" name="tab" id="tab_01">
    <div class="content">
      <ol>
        <li><a target="_blank" href="文章連結網址1">文章標題1</a></li>
        <li><a target="_blank" href="文章連結網址1">文章標題2</a></li>
        <li><a target="_blank" href="文章連結網址1">文章標題3</a></li>
      </ol>
    </div>
  </div>
  <label for ="tab_02" class="pre">右邊的灰底收合標籤標題2</label>
  <div class="box">
    <input type="checkbox" name="tab" id="tab_02">
    <div class="content">
      <ol>
        <li><a target="_blank" href="文章連結網址1">文章標題1</a></li>
        <li><a target="_blank" href="文章連結網址1">文章標題2</a></li>
        <li><a target="_blank" href="文章連結網址1">文章標題3</a></li>
      </ol>
    </div>
  </div>
  <label for ="tab_03" class="pre">右邊的灰底收合標籤標題3</label>
  <div class="box">
    <input type="checkbox" name="tab" id="tab_03">
    <div class="content">
    </div>
  </div>
</div><!-- 右邊的 Index 區域結束 -->

CSS

/* 這裡是全域設定，用來規範內嵌框架內的樣式 */
* {
  box-sizing: border-box;
  font-family: 'Noto Sans Mono CJK TC','Noto Sans CJK TC','Noto Serif CJK TC','微軟正黑體','Consolas';
  }

/* 這裡是內嵌框架內的主體，用來指定整體背景顏色 */
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,1);
  padding: 0.5pc 1pc;
  margin: 1pc;
  box-shadow: rgba(0,0,0,0.8) 0.5pc 0.5pc 1pc;
  }

/* 這裡是沒用到的水平線呈現方式，某莎在測試時把它改成櫻花圖案 XD */
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;
  }

/* 這裡是白色便利貼的容器，設定 Flex 讓它們左右左右排列 */
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: start;
  padding: 0 0.25pc;
  }

/* 這裡是白色便利貼的彩虹標題文字，稍微利用 Clip 弄了點特效 */
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;
  min-width: calc(50% - 1pc);
  max-width: calc(50% - 1pc);
  margin: 0.5pc;
  padding: 0 0 1pc 0;
  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;
  ...