JSFiddle - React, Tailwind, and code Playground

by meridius

HTML

<div id="tracy-debug">
    <div id="tracy-debug-panel-Yadup-Panel" class="tracy-panel tracy-mode-float">
         <h1>DB updates</h1>

        <div class="yadupPanel">
            <div class="yadup-controls">
                <div class="yadup-controls-inner">
                    <table class="yadup-controls-list">
                        <thead>
                            <tr>
                                <th>timestamp</th>
                                <th>in DB</th>
                                <th>on disk</th>
                                <th>is full</th>
                                <th>run</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>2014-08-27 20:06:58</td>
                                <td>yes</td>
                                <td>yes</td>
                                <td>yes</td>
                                <td>
                                    <input type="checkbox" />
                                </td>
                            </tr>
                            <tr>
                                <td>2014-08-27 20:10:15</td>
                                <td>yes</td>
                                <td>yes</td>
                                <td>no</td>
                                <td>
                                    <input type="checkbox" />
                                </td>
                            </tr>
                            <tr>
                                <td>2014-09-21 21:41:07</td>
                                <td>yes</td>
                                <td>yes</td>
                                <td>no</td>
                                <td>
                                    <input type="checkbox" />
                                </td>
                            </tr>
                            <tr>
                               ...

CSS

/* VENDOR CSS - DO NOT TOUCH */
#tracy-debug {
    direction: ltr;
    bottom: 0;
    position: absolute;
    right: 0;
    display: block;
}
#tracy-debug-panel-Yadup-Panel {
    display: block;
    bottom: 15px;
    right: 20px;
    z-index: 20014;
}
#tracy-debug .tracy-mode-float {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    box-shadow: 1px 1px 30px rgba(102, 102, 102, 0.36);
    min-height: 50px;
    min-width: 150px;
    padding: 10px;
    position: fixed;
}
#tracy-debug .tracy-panel {
    background: none repeat scroll 0 0 white;
    color: #333;
    font: 12px/1.5 sans-serif;
    text-align: left;
}
#tracy-debug * {
    list-style: inherit;
    margin: 0;
    opacity: 1;
}


/* MY PROJECT CSS - PLEASE DO CHANGE */
.yadup-controls, .yadup-sqlPanel {
    display: inline-block;
}

.yadup-controls-inner {
    height: 265px;
    overflow-y: auto;
}
.yadup-controls-buttons {
    height: 35px;
    position: absolute;
    bottom: 1;
}

.yadup-controls input[type="button"] {
    background: #d99696;
    border-radius: 4px;
    box-shadow: 1px 1px lightgray;
    color: black;
    margin: 4px 2px 2px;
    padding: 2px 4px;
}
.yadup-sqlPanel {
    width: 500px;
    height: 300px;
    vertical-align: top;
    background: #fdf5ce;
    border-radius: 4px;
    box-shadow: 1px 1px lightgray;
}
.yadup-sqlPanel-heading {
    border-bottom: 1px solid gray;
}
.yadup-sqlPanel-heading p {
    margin: 0.4em 0;
}
.yadup-sqlPanel-heading span {
    margin-right: 1em;
    margin-left: 0.5em;
}
.yadup-sqlPanel-query {
    padding: 5px;
    height: 90%;
}
.yadup-sqlPanel-query-inner {
    width: 98%;
    height: 96%;
    margin-left: auto;
    margin-right: auto;
}
.yadup-sqlPanel-query-inner textarea, .yadup-sqlPanel-query-inner code {
    width: 100%;
    height: 100%;
    padding: 5px;
    margin-left: -5px;
    border: none;
    border-radius: 4px;
    background: white;
}
.yadup-sqlPanel-query-inner textarea {
    display: none;
    resize:...

JavaScript

$(".switch").on("click", function () {
    $("code, textarea").toggle();
}).focus();