JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<!DOCTYPE html>
  <html>
    <head>
      <meta name='viewport' content='width=device-width, initial-scale=1'>
      <style>
        html {
          scroll-snap-type: x mandatory;
          scroll-snap-stop: always;
        }
        html, body {
          margin: 0;
          padding: 0;
          font-family: Helvetica;
          text-align: center;
        }

        a {
          background-color: #555555;
          color: white;
          padding: 16px 40px;
          text-decoration: none;
          font-size: 30px;
          display: inline-block;
        }

        .program {
          background-color: #4CAF50;
        }

        section {
          display: flex;
          flex-direction: column;
          gap: 4px;
          justify-content: center;
        }
        .h {
          flex-direction: row;
        }
        body {
          display: flex;
          flex-direction: row;
          height: 100vh;
          width: 100vw;
        }
        article {
          scroll-snap-align: start;
          width: 100vw;
          flex: 0 0 100vw;
          overflow-y: auto;
          height: 100vh;
          display: flex;
          flex-direction: column;
        }
        input {
          writing-mode: bt-lr;
          appearance: slider-vertical;
          width:6px;
        }
        .b {
          height: 100%;
          justify-content: space-evenly;
          gap:0;
        }
        .c {
          flex-wrap: wrap;
        }

      </style>
    </head>

    <body>
      <article>
      <h1>Dome Controller</h1>
      <h2>Programs</h2>
      <section class="h c">
        <a href='/program/1/1/1/1/1' class="program">BLINK</a>
        <a href='/program/2/1/1/1/1' class="program">CONSTRUCTION</a>
        <a href='/program/3/1/1/1/1' class="program">CONFETTI</a>
        <a href='/program/4/1/1/1/1' class="program">FLASHING</a>
        <a href='/program/5/1/255/1/1' class="program">DIAGNOSE</a>
        <a href='/off'>OFF</a>
      </section>
     ...