JSFiddle - React, Tailwind, and code Playground

by samishii23

HTML

<script src="http://hoa.ath.cx/~dm1/src/js/default.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <script>
            function example() {
                $("#content-main").fadeOut(400).append("Hi").fadeIn(400);
                }
        </script>
    </head>
    
    <body>
        <div class="content-body">
            <div class="content-row">
                <div class="content-spacer-l">R1 C1</div>
                <div class="content-title">R1 C2</div>
                <div class="content-spacer-r">R1 C3</div>
            </div>
            <div class="content-row">
                <div class="content-spacer-l">&nbsp;</div>
                <div class="content-bg content-nav"></div>
                <div class="content-spacer-r">&nbsp;</div>
            </div>
            <div class="content-row" style="height:15px;"></div>
            <div class="content-row">
                <div class="content-spacer-l"></div>
                <div class="" id="content-main">
                    <button onClick="example();">Click me</button>
                </div>
                <div class="content-spacer-r"></div>
            </div>
        </div>
    </body>
</html>

CSS

.content-body { display: table; }
.content-row { display: table-row; }
.content-cell { display: table-cell; }
.content-spacer-l { display: table-cell; width: 15px; background-color: #000; }
.content-spacer-r { display: table-cell; width: 125px; background-color: #000; }

.hidden { display: none; }