JSFiddle - React, Tailwind, and code Playground

by shriek

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <link href="https://fonts.googleapis.com/css?family=Rubik:400,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700|Roboto+Mono" rel="stylesheet">
  </head>

  <body>

    <div class="container">
      <header>
        <div># Everyone needs an outlet.</div>
        <div># This is mine.</div>
      </header>
      <ul>
        <li data-year="2020">
          <span>
      <span>2020-</span><span>01</span>-<span>10</span>
          </span>
          <span> Description 1</span></li>
        <li data-year="2020">
          <span>
      <span>2020-</span><span>11</span>-<span>11</span>
          </span>
          <span> Description 2</span></li>
        <li data-year="2021">
          <span>
      <span>2021-</span><span>02</span>-<span>11</span>
          </span>
          <span> Description 1</span></li>
        <li data-year="2021">
          <span>
      <span>2021-</span><span>02</span>-<span>19</span>
          </span>
          <span> Description 2</span></li>
        <li data-year="2021">
          <span>
      <span>2021-</span><span>04</span>-<span>09</span>
          </span>
          <span> Description 3</span></li>
        <li data-year="2021" class="selected">
          <span>
      <span>2021-</span><span>05</span>-<span>20</span>
          </span>
          <span> Description 4</span>
        </li>
        <li data-year="2022">
          <span>
      <span>2021-</span><span>04</span>-<span>09</span>
          </span>
          <span> Description 1</span>
        </li>
        <li data-year="2022">
          <span>
      <span>2021-</span><span>07</span>-<span>20</span>
          </span>
          <span> Description 2</span>
        </li>
      </ul>
      <footer>
        <span>Footer</span>
      </footer>
    </div>

  </body>
  </html>

CSS

html, body {
  height: 100%;
}
body {
  font-family: 'Roboto Mono', monospace;
  padding: 1rem;
  display: flex;
  justify-content: center;
  /* border: 1px solid green; */
  font-size: .8rem;
}
.container {
  min-width: 600px;
  /* border: 1px solid red; */
  flex-direction: column;
  justify-content: flex-start;
  border: 1px solid red;
}

header {
  border: 1px solid aqua;
}

ul {
  font-family: 'IBM Plex Mono', monospace;
  /* font-family: 'Roboto Mono', monospace; */
  /* font-weight: 700; */
  list-style: none;
  font-size: 1rem;
  /* border: 1px solid pink; */
  padding: 0;
}
 
/* --Begin for the date-- */

ul li span:first-child {
  color: gray;
}

ul > [data-year="2020"] ~ [data-year="2020"] > span > span:first-child {
  visibility: hidden;
}

ul > [data-year="2021"] ~ [data-year="2021"] > span > span:first-child {
  visibility: hidden;
}

ul > .selected[data-year="2021"] > span > span:first-child {
  visibility: visible;
}

ul > [data-year="2022"] ~ [data-year="2022"] > span > span:first-child {
  visibility: hidden;
}

/* --End for the date-- */

ul li {
  margin: 0px 10px 0px 0px;
  /* border: 1px solid yellow; */
}
ul li > span {
  padding: 0 8px;
}

ul li.selected {
  background-color: #666 !important;
}

ul li.selected span:first-child {
  background-color: #ccc;
}

ul li span:first-child {
  background-color: #fcfcfc;
}

footer {
  margin-top: auto;
  border: 1px solid pink;
}