JSFiddle - React, Tailwind, and code Playground

by amanelsalvia

HTML

<h2>關於鎮魘司降妖除魔那檔事</h2>
<div class="description">
  <span>已發布</span>
  <span class="ing">待更新</span>
  <span class="R18">十八禁</span>
  </div>

  <div class="book">
    <ul class="chapter">
      <li>OP. 孤僻的貓妖<br>
        <span class="ok"><a target="_blank" href="https://matters.news/@salvia/344290">上</a></span>
        <span class="ok"><a target="_blank" href="https://matters.news/@salvia/344618">中</a></span>
        <span class="ok"><a target="_blank" href="https://matters.news/@salvia/344895">下</a></span></li>
      <li>CH.01 轉學生<br>
        <span class="ok"><a target="_blank" href="https://matters.news/@salvia/345099">一</a></span>
        <span class="ok"><a target="_blank" href="https://matters.news/@salvia/345332">二</a></span>
        <span class="ok"><a target="_blank" href="https://matters.news/@salvia/345841">三</a></span>
        <span class="ok"><a target="_blank" href="https://matters.news/@salvia/346183">完</a></span></li>
      <li>CH.02 友善的鄰座<br>
        <span class="ok"><a target="_blank" href="https://matters.news/@salvia/346531">一</a></span>
        <span class="ok"><a target="_blank" href="https://matters.news/@salvia/346813">二</a></span>
        <span class="ok"><a target="_blank" href="https://matters.news/@salvia/347104">三</a></span>
        <span class="ing">四</span>
        <span class="ing">完</span></li>
      <li>CH.03 蠢動的惡意<br>
        <span class="ing">一</span>
        <span class="ing">二</span>
        <span class="ing">三</span>
        <span class="ing">四</span>
        <span class="ing">完</span></li>
      <li>CH.04 放課後的強吻<br>
        <span class="ing">一</span>
        <span class="ing">二</span>
        <span class="ing">三</span>
        <span class="ing">四</span>
        <span class="ing">完</span></li>
      <li>CH.05 日如春雪，夜似狂城<br>
        <span class="ing">一</span>
        <span class="ing">二</span>
        <span class="ing">三</span>
        <span class="ing">四</span>
        <span class="ing">五</span>
        <span...

CSS

* {
  font-family: 
    'Noto Sans Mono CJK TC', 
    'Noto Sans Mono CJK HK', 
    'Noto Sans Mono CJK JP', 
    'Noto Sans Mono CJK', 
    'Noto Sans Mono', 
    'consolas', 
    '微軟正黑體';
  text-decoration: none;
  }

body {
  background: linear-gradient(to bottom, #DFDAF2 0%, #EBF0F5 50%, #D9D7AD 100%) no-repeat;
  max-height: 100%;
  max-width: 100%;
  }

h2 {
  font-size: 20pt;
  text-align: center;
  color: #1C1C1C;
  }

.description {
  margin: 0 auto;
  text-align: center;
  }

a {
  color: #574C57;
  }

.book {
  border-radius: 0.25pc;
  border: 0.1pc solid #AAA;
  margin: 1pc;
  margin-bottom: 2pc;
  padding: 0.25pc;
  box-sizing: border-box;
  background: rgba(100%,100%,100%,0.8);
  box-shadow: 1pc 1pc 1pc rgba(50%,50%,50%,0.5);
  }

.chapter {
  font-size: 16pt;
  line-height: 200%;
  list-style-type: none;
  box-sizing: border-box;
  }

.chapter li {
  border-bottom: 0.1pc dashed #AAA;
  padding: 0.25pc;
  margin: 0.25pc;
  box-sizing: border-box;
  width: calc(100% - 3pc);
  color: #574C57;
  }

.chapter li:last-child {
  border-bottom: none !important;
  }

span {
  border-radius: 0.25pc;
  background: #F0EBD8;
  width: 1.5pc;
  padding: 0.25pc 0.5pc;
  margin: none;
  font-size: 11pt;
  float: float;
  }

span.ok {
  background: #F0EBD8;
  }

span.ok:hover {  background: #574C57; }
span.ok:hover a {  color: #FFF;  }


span.ing {
  background: #EBF0F5;
  color: #808080;
  }

span.R18 {
  background: #D05A6E;
  color: #FFF;
  }

.chapter li:after {
  clear: both !important;
  }