JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<div id="left">
    <textarea></textarea>
</div>

<div id="right">
    <div class="wrap"></div>
</div>

CSS

body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    background:#eee;  
    text-shadow:0 1px 0 #fff;
    color:#444;            
}
#left{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    right:50%;
    }
    #left textarea{
        position:absolute;
        top:10px;
        left:10px;
        right:10px;
        bottom:10px;
        border:none;
        box-shadow:0 1px 2px rgba(0,0,0,0.2) inset;
        border-radius:5px;
        resize:none;
        padding:10px;
        border:1px solid #ccc;
        -webkit-transition:border 1s ease;    
        }
        #left textarea:focus{
            outline:none;
            border:1px solid #999;    
        }    

#right{
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    left:50%;
    overflow:auto;
    }
.wrap{
    padding:10px;
    margin:10px;
    }