JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.3.5/split.min.js"></script>
<div class="h-screen">


<div class="flex flex-row w-full h-full overflow-hidden" style="background-color: #1e1e1e" wire:ignore>
        
        <div class="flex flex-col flex-grow overflow-hidden horizontal-panel">
            <div class="relative w-full h-full overflow-hidden html-panel" wire:ignore>
               
            </div>
            <div class="relative w-full h-full overflow-hidden css-panel" wire:ignore>
               
            </div>
            <div class="relative w-full h-full overflow-hidden js-panel" wire:ignore>
               
            </div>
        </div>
        <div class="overflow-hidden bg-black preview-panel">
            some text
        </div>
    </div>
    </div>

CSS

.gutter {
            background-color: #eee;
            background-repeat: no-repeat;
            background-position: 50%;
        }

        .gutter.gutter-horizontal {
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
            cursor: col-resize;
        }

        .gutter.gutter-vertical {
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
            cursor: row-resize;
        }

JavaScript

document.addEventListener("DOMContentLoaded", (event) => {
     script = document.createElement('script');
     script.src = 'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js';

     script.onload = function() {
       require.config({
         paths: {
           'vs': 'https://unpkg.com/[email protected]/min/vs'
         }
       });

       window.MonacoEnvironment = {
         getWorkerUrl: () => proxy
       };

       let proxy = URL.createObjectURL(new Blob([`
            self.MonacoEnvironment = {
                baseUrl: 'https://unpkg.com/[email protected]/min/'
            };
            importScripts('https://unpkg.com/[email protected]/min/vs/base/worker/workerMain.js');
        `], {
         type: 'text/javascript'
       }));

       var htmlEditor, cssEditor, jsEditor

       require(["vs/editor/editor.main"], function() {
         htmlEditor = monaco.editor.create(document.getElementsByClassName('html-panel')[
           0], {
           value: [

           ].join('\n'),
           language: 'html',
           theme: 'vs-dark',
           minimap: {
             enabled: false
           },
           fontSize: 16,
           codeLens: false,
           formatOnPaste: true,
           wordWrap: 'on',
           automaticLayout: true,
         })

         cssEditor = monaco.editor.create(document.getElementsByClassName('css-panel')[0], {
           value: [
             'html{height: 100%;}',
             'body{min-height: 100%;}'
           ].join('\n'),
           language: 'css',
           theme: 'vs-dark',
           minimap: {
             enabled: false
           },
           fontSize: 16,
           codeLens: false,
           formatOnPaste: true,
           wordWrap: 'on',
           automaticLayout: true,
         })

         jsEditor = monaco.editor.create(document.getElementsByClassName('js-panel')[0], {
           value: [
             '(function(){',
             '\t',
             '})()'
        ...