JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=inconsolata:400" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<style>
    background-color: var(--color-orange);
    opacity: 0.8;

    background-image: 
        linear-gradient(red 2px, transparent 2px)/*,
        linear-gradient(90deg, #444cf7 2px, transparent 2px),
        linear-gradient(#444cf7 1px, transparent 1px),
        linear-gradient(90deg, #444cf7 1px, #e5e5f7 1px)*/
    ;
    background-size:
        50px 50px/*,
        50px 50px,
        10px 10px,
        10px 10px*/
    ;
    background-position:
        -2px -2px/*,
        -2px -2px,
        -1px -1px,
        -1px -1px*/
    ;
</style>

<div class="min-h-dvh"></div>

CSS

html {
    font-size: 32px;
    line-height: 1.4;
}

body {
    font-family: 'Inconsolata', monospace;
    font-size: calc(2dvh + 2dvw / 3);
    height: 100vdh;
}