JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='super-box'>
    <div>
        <div class='box draggable' id='html-box'>
            <div class='area-label'>HTML</div>
            <div class='line-nums'></div>
            <div class='txt-area-box'>
                <div class='textarea-fixer'></div>
                <textarea class='html-area'></textarea>
            </div>
        </div>
        <div class='box' id='css-box'>
            <div class='area-label'>CSS</div>
            <div class='line-nums'></div>
            <div class='txt-area-box'>
                <div class='textarea-fixer'></div>
                <textarea class='css-area'></textarea>
            </div>
        </div>
    </div>
    <div>
        <div class='box draggable' id='js-box'>
            <div class='area-label'>JS</div>
            <div class='line-nums'></div>
            <div class='txt-area-box'>
                <div class='textarea-fixer'></div>
                <textarea class='js-area'>
                    Not currently working :(
                </textarea>
            </div>
        </div>
        <div class='box' id='result-box'>
          <div class='background'></div>
                <div class='result'></div>
                <style class='result-styles'>
                </style>
                <script class='result-scripts'>
                </script>
        </div>
    </div>
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
.super-box {
    background: #F5F5F5;
    text-align: center;
    padding: 5px 0;
}
.box {
    max-width: 70%;
    min-width: 10%;
    height: 300px;
    width: 400px;
    background-color: transparent;
    position: relative;
    display: inline-block;
    border: 1px solid #bbb;
    margin-top: 4px;
    margin-left: 4px;
    vertical-align: top;
    overflow: hidden;
}
.box .background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -100;
  background: white;
}
.area-label {
    font-family: arial;
    font-size: 10px;
    position: absolute;
    border-radius: 2px;
    border: 1px solid #eee;
    padding: 3px;
    color: #aaa;
    top: 5px;
    right: 5px;
}
.line-nums {
    width: 30px;
    min-height: 100%;
    background: #F5F5F5;
    float: left;
}
.txt-area-box {
    float: right;
    width: calc(98% - 30px);
    height: 100%;
}
.result {
    width: 100%;
    height: 100%;
    float: left;
    text-align: left;
    overflow: scroll;
}
.textarea-fixer {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
    margin-left: -2px;
    margin-right: -2px;
}
textarea {
    display: inline-block;
    vertical-align: middle;
    margin-left: -2px;
    margin-right: -2px;
    width: 100%;
    height: 97%;
    border: none;
    resize: none;
    outline: none;
    font-size: 12px;
    margin: 0;
    padding: 0;
}
.in-box {
    width: 50px;
    height: 50px;
}
.red {
    background: red;
}
.green {
    background: green;
}
.blue {
    background: blue;
}

JavaScript

$(document).ready(function() {
    var map = {};
    map['html'] = 'css';
    map['js'] = 'result';
    
    $('.html-area').on('input', function() {
        $('.result').html($(this).val());
    });
    $('.css-area').on('input', function() {
        $('.result-styles').html($(this).val());
    });
    $('.js-area').on('input', function() {
        $('.result-scripts').html($(this).val());
    });
    $('.draggable').resizable({
        resize: function() {
            var idWithoutBox = $(this).attr('id').replace('-box','');
            var sisterIdWithoutBox = map[idWithoutBox];
            var sisterBox = 
                $('#' + sisterIdWithoutBox + '-box')
                .css('height', $(this).css('height'));
            var thisWidth = parseInt($(this).css('width').replace('px', '')) - 400;
            $('#' + sisterIdWithoutBox + '-box')
                .css('width', 400 - thisWidth + 'px');
        }
    });
    
});

/*
.input-box {
position: relative;
display: inline-block;
margin: 5px;
}
input {
 outline: none;
}
.shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 z-index: -1;
 opacity: 0.5;
box-shadow: 0 1px 10px 0;
}

<div class='input-box'>
 <input/>
 <div class='shadow'></div>
</div>
*/