JSFiddle - React, Tailwind, and code Playground

by takeshi1234

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />

    <title>pixi.js</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.1/pixi.min.js"></script>
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/[email protected]/dist/viewport.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css">

    <style>
        body {
            margin: 0px 80px 0px 80px;
            min-width: 800px;
            max-width: 1500px;
        }

        main {
            background-color: #eff;
        }

        .parent {
            position: relative;
            overflow: hidden;
            width: 100%;
        }

        .parent:before {
            content: "";
            display: block;
            padding-top: 100%;
        }

        .child {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
    </style>
</head>

<body>
    <main class="columns is-mobile">
        <div class="column is-7">
            <section class="parent box media section-padding-large">
                <div class="child" id="#pixiContainer">

                </div>
            </section>
        </div>
        <div class="submenu column is-5">
            <aside class="box">
                AAAAAAAAAAAAAAAAAAAAAAA
            </aside>
            <aside class="box menu">
                BBBBBBBBBBBBBBBBBBB
            </aside>
        </div>
    </main>
</body>
<script>
    stageConfig = {
        worldWidth: 8000,
        worldHeight: 8000,
        scaleBy: 1.5,
        container: document.getElementById('#pixiContainer'),
    }

    // var pixi_container = document.getElementById('#pixi');
    // console.log(pixi_container)
    var w = stageConfig.container.clientWidth;
    var h = stageConfig.container.clientHeight;

    const app = new PIXI.Application()
   ...