JSFiddle - React, Tailwind, and code Playground

by blackpolygon

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ethereal Shader</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: Arial, sans-serif;
        }
        ethereal-shader {
            display: block;
            height: 100%;
        }
    </style>
</head>
<body>
    <ethereal-shader></ethereal-shader>

    <script>
        class EtherealShader extends HTMLElement {
            constructor() {
                super();
                this.attachShadow({ mode: 'open' });
            }

            connectedCallback() {
                this.render();
                this.initThree();
            }

            render() {
                this.shadowRoot.innerHTML = `
                    <style>
                        :host {
                            display: flex;
                            flex-direction: column;
                            height: 100%;
                        }
                        #canvas-container {
                            flex-grow: 1;
                            min-height: 0;
                        }
                        #controls {
                            padding: 20px;
                            background-color: #f0f0f0;
                        }
                        label {
                            display: block;
                            margin-bottom: 10px;
                        }
                        input[type="range"] {
                            width: 100%;
                        }
                    </style>
                    <div id="canvas-container"></div>
                    <div id="controls">
                        <label>
                            Color Count: <span id="colorCountValue">5</span>
     ...