JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
        <title>Test data-bindings on the static page with the Aurelia 2</title>
        <script type="importmap">
            {
                "imports": {
                    "aurelia": "https://cdn.jsdelivr.net/npm/[email protected]/dist/native-modules/index.js",
                    "my-app": "/js/my-app.js"
                }
            }
        </script>
    </head>
    <body>
        <div id="my-app" class="container">
            <div class="card">
                <div class=card-header>
                    Form binding with Aurelia v2
                </div>
                <div class="card-body">
                    <form>
                        <label>
                            Message:
                            <input type="text" class="form-control" value.bind="message" />
                        </label>
                        <button class="btn btn-primary" click.trigger="reverseMessage()">Reverse Message</button>
                    </form>
                    <p>
                        ${ message }
                    </p>
                </div>
            </div>
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha256-85WHXrXVjFEoxDSBLNClPUOLEVNvf9FXcHfYpcYS4f0=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
        <script type="module"...