Preact

by Nicholas Berlette

HTML

<script src="https://unpkg.com/@unocss/[email protected]/attributify.global.js"></script>
<script src="https://unpkg.com/@github/tab-container-element"></script>
<script src="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&amp;family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap"></script>
<div id="app" class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 dark:bg-gray-900 py-6 sm:py-12">
  <div><img src="https://play.tailwindcss.com/img/beams.jpg" crossorigin alt="" class="absolute left-1/2 top-1/2 max-w-[2500px] max-h-[2000px] min-h-screen min-w-screen w-screen h-screen -translate-x-1/2 -translate-y-1/2 animate-spin ![animation-duration:5s] ![transform-origin:50%]" /></div>
  <div class="absolute inset-0 [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))] bg-white dark:!bg-gray-800" style="background:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22none%22%20stroke%3D%22%230f172a%22%0A%20%20stroke-opacity%3D%220.08%22%3E%0A%20%20%3Cpath%20d%3D%22M0%20.5H31.5V32%22%20%2F%3E%0A%3C%2Fsvg%3E%0A) center center repeat"></div>
  <div class="container relative max-w-md rounded-lg bg-white dark:bg-gray-950 px-12 pb-12 pt-14 shadow-xl ring-1 ring-gray-900/5 dark:ring-gray-100/5 transition-all !duration-[2s] ease-out hover:!shadow-2xl hover:!drop-shadow-md sm:mx-auto sm:max-w-xl sm:rounded-lg sm:px-12 sm:py-12 sm:!pb-4">
    <header class="mb-6 border-b border-b-slate-200 dark:border-b-slate-800 pb-3">
      <h1 class="font-[Gotham] text-2xl font-normal uppercase tracking-tighter text-slate-600 [text-shadow:var(--tw-box-shadow,4px_5px_6px_#4322)] sm:text-3xl md:text-4xl xl:text-5xl select-none"><span class="font-black text-slate-800 dark:text-slate-200">AI</span> Playground</h1>
    </header>
    <tab-container>
    <ul role="tablist"...

CSS

:root {
  --color-1: #ffd95b;
  --color-2: #f2803b;
  --color-3: #ed5552;
  --color-4: #2a3f5c;
}

body {
  font-family: "DM Sans", "Apple ui-sans-serif;
  background: linear-gradient(90deg, var(--color-1) 0%, var(--color-1) 25%, var(--color-2) 25%, var(--color-2) 50%, var(--color-3) 50%, var(--color-3) 75%, var(--color-4) 75%, var(--color-4) 100%);
}/*
! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in...

Preact

/* @jsx h */
const { Component, h, render } = preact

class TodoApp extends Component {
  constructor(props) {
    super(props)
    this.state = {
    	items: [
      	{ text: "Learn JavaScript", done: false },
        { text: "Learn Preact", done: false },
        { text: "Play around in JSFiddle", done: true },
        { text: "Build something awesome", done: true }
      ]
    }
  }
  
  render() {
    return (
      <div>
        <h2>Todos:</h2>
        <ol>
        {this.state.items.map(item => (
          <li key={item.id}>
            <label>
              <input type="checkbox" disabled readOnly checked={item.done} /> 
              <span className={item.done ? "done" : ""}>{item.text}</span>
            </label>
          </li>
        ))}
        </ol>
      </div>
    )
  }
}

render(<TodoApp />, document.querySelector("#app"))