JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<html style="--tg-color-scheme: light; --tg-theme-bg-color: #ffffff; --tg-theme-button-color: #3390ec; --tg-theme-button-text-color: #ffffff; --tg-theme-hint-color: #707579; --tg-theme-link-color: #00488f; --tg-theme-secondary-bg-color: #f4f4f5; --tg-theme-text-color: #000000; --tg-theme-header-bg-color: #ffffff; --tg-theme-accent-text-color: #3390ec; --tg-theme-section-bg-color: #ffffff; --tg-theme-section-header-text-color: #3390ec; --tg-theme-subtitle-text-color: #707579; --tg-theme-destructive-text-color: #df3f40; --tg-viewport-height: 100vh; --tg-viewport-stable-height: 100vh; background: rgb(0, 0, 0); --svh: 613px; --dvh: 613px; --lvh: 613px;" class="has-layout-tabs">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <link rel="stylesheet" href="/_dist/entry.xgjqmJNc.css" integrity="sha384-XNeXko/+RaVMUYELoKv2UGYSJnKXmUmNrAUtWbWqkAhQhFzEnC2lJWw8Zm2u67FP">
    <link rel="modulepreload" as="script" crossorigin="" href="/_dist/OsVrX5K2.js" integrity="sha384-JH0DdvMUrQ/09Rpb1TUHR9HiiKdSgUIIOKClVPk4MjoejmtCuNFgY/5ROVRm1qQ2">
    <link rel="prefetch" as="video" href="/_dist/loader.CHvAPMmo.webm">
    <link rel="prefetch" as="video" href="/_dist/loader.CuI5ghga.mp4">
    <script type="module" src="/_dist/OsVrX5K2.js" crossorigin="" integrity="sha384-JH0DdvMUrQ/09Rpb1TUHR9HiiKdSgUIIOKClVPk4MjoejmtCuNFgY/5ROVRm1qQ2"></script>
    <style>
      .settings-menu {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(40, 44, 52, 0.95);
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        color: #abb2bf;
        font-family: 'Arial', sans-serif;
        z-index: 10000;
        padding: 20px;
        width: 300px;
      }

      .settings-title {
        color: #61afef;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 15px;
        display: flex;
        align-items:...

CSS

@font-face {
    font-display: swap;
    font-family: RoobertPro;
    font-style: normal;
    font-weight: 400;
    src: url(./Regular.CLmC6DVf.woff2) format("woff2")
}

@font-face {
    ascent-override:97.48%;descent-override:25%;font-family: RoobertPro Fallback;
    font-style: normal;
    font-weight: 400;
    line-gap-override:0%;size-adjust:103.21%;src: local("Arial")
}

@font-face {
    font-display: swap;
    font-family: RoobertPro;
    font-style: normal;
    font-weight: 500;
    src: url(./Medium.9CUCDBk_.woff2) format("woff2")
}

@font-face {
    ascent-override:97.34%;descent-override:24.96%;font-family: RoobertPro Fallback;
    font-style: normal;
    font-weight: 500;
    line-gap-override:0%;size-adjust:103.35%;src: local("Arial")
}

@font-face {
    font-display: swap;
    font-family: RoobertPro;
    font-style: normal;
    font-weight: 600;
    src: url(./SemiBold.BiIuU0GS.woff2) format("woff2")
}

@font-face {
    ascent-override:104.98%;descent-override:26.92%;font-family: RoobertPro Fallback;
    font-style: normal;
    font-weight: 600;
    line-gap-override:0%;size-adjust:95.83%;src: local("Arial Bold")
}

@font-face {
    font-display: swap;
    font-family: RoobertPro;
    font-style: normal;
    font-weight: 700;
    src: url(./Bold.vYYfUnV7.woff2) format("woff2")
}

@font-face {
    ascent-override:104.77%;descent-override:26.87%;font-family: RoobertPro Fallback;
    font-style: normal;
    font-weight: 700;
    line-gap-override:0%;size-adjust:96.02%;src: local("Arial Bold")
}

body,html {
    margin: 0;
    padding: 0;
    background: #000
}

html {
    background: #000;
    color: #fff;
    font-family: RoobertPro,RoobertPro Fallback;
    font-variant-numeric: slashed-zero;
    height: var(--dvh,100vh);
    overflow: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px
}

body {
    height:...