JSFiddle - React, Tailwind, and code Playground

by sachid

HTML

<div class="col-md-12" id="page-body">

        <div id="canvas" class="container">
            <div class="col-md-6 canvas-container">
                <button id="load-input-btn">Load input</button>

                <div class="load-file" id="load-input">
                    <input type="file" id="input-file-select" name="input-select[]" />
                    <div class="file-drag" id="input-file-drag">or drop files here</div>
                </div>
                <div class="scroll-box" id="input-structure">

                </div>

                <div class="file-content" id="input-file-content">
                    File information:-
                </div>
            </div>

            <div class="col-md-6 canvas-container">
                <button id="load-output-btn">Load output</button>

                <div class="load-file" id="load-output">
                    <input type="file" id="output-file-select" name="output-select[]" />
                    <div class="file-drag" id="output-file-drag">or drop files here</div>
                </div>
                <div class="scroll-box" id="output-structure">

                </div>

                <div class="file-content" id="output-file-content">
                    File information:-
                </div>
            </div>

        </div>
    </div>


    <script src="assets/application/fileHandler.js"></script>
    <script>
        $(document).ready(function () {
            $("#load-output-btn").click(function () {
                $("#load-output").slideToggle();
            });
            $("#load-input-btn").click(function () {
                $("#load-input").slideToggle();
            });
        });
    </script>

CSS

#page-body {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

#page-body #canvas {
    border: 2px solid black;
    margin: 50px auto;
    padding: 10px;
    width: 60%;
}

#canvas .canvas-container {
    text-align: center;
    margin: 0 auto;
}

#canvas .canvas-container .scroll-box {
    height: 300px;
    width: 40%;
    border: 1px solid #ccc;
    font: 16px/26px Georgia, Garamond, Serif;
    overflow: auto;
    text-align: left;
    margin: 10px auto;
}

.file-content {
    padding: 10px;
    text-align: left;
}

#canvas .canvas-container .load-file {
    display: none;
}

.file-drag {
    height: 75px;
    font-weight: bold;
    text-align: center;
    color: #555;
    border: 2px dashed #555;
    border-radius: 7px;
    cursor: default;
}

.file-drag-hover {
    height: 75px;
    color: #f00;
    border-color: #f00;
    border-style: solid;
    box-shadow: inset 0 3px 4px #888;
}