JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<!DOCTYPE html>
<html lang="en" data-theme="dark">
  <head>
    <meta charset="UTF-8" />
    <title>Select Window Coordinates</title>
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <!--
    This app is in an ALPHA stage, meaning it may change in design.

    Remaining tasks:
      - TODO: support side docks
        TODO: support adjustments with move (m), shrink (i), and grow (I) combined with
              the directional letters hjkl for left, up, down, and right, respectively
        TODO: make inset and grow use aspect ratio scaling, such that when the size is the full screen,
              it's equal pixels on x/y, but at smaller sizes it prefers width over height
        TODO: make grow use the inverse of inset, such that combinations iI, Ii, and iiiIII are no-ops
        TODO: support setting an aspect ratio in both shrink and grow variants

      Administrative...
        TODO: refactor into multiple files
        TODO: build script to combine into a single, readable html file like we have now
        TODO: unit tests
        TODO: documentation
  -->
  <!--

    The UI is fully responsive, but an aspect ratio of 1.55:1 works well. Sizes at 1/3 screen

    1080:
      <body data-kmwidth="640" data-kmheight="413">
    1440:
      <body data-kmwidth="853" data-kmheight="550">
    4k:
      <body data-kmwidth="1044" data-kmheight="674">
  -->
  <body data-kmwidth="1044" data-kmheight="674">
    <style>
      /* Configuration */
      :root {
        /* Number of history frames to persist in the KM variable */
        --history-size: 40;
      }

      /* Theme settings; modify as you like */
      :root {
        --background: #444;
        --background-stripe: #555;
        --foreground: #fff5ee;
        --background-alt: #232935;
        --foreground-alt: #9ad7e9;
        --foreground-alt-muted: #a1bdc6;
        --moderate-contrast: rgba(40, 150, 150,...