JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<div id="main">
        <div id="main-inner">        
            <div id="main-inner-left">                    
            </div><!-- /main-inner-left -->    
            <div id="main-inner-right">
            </div><!-- /main-inner-right -->    
        </div><!-- /main-inner -->    
    </div><!-- /main -->

CSS

* { margin: 0; padding: 0; }

/* 50 tiny version */
body { 
    width: 100%; 
    min-width: 400px; 
    font-size: 62.5%; 
    color: #f8f7f3; 
    padding: 0;
}

#main { 
    background: #282C37;
    position: relative;
    z-index: 1;
    overflow: hidden;
    }

#main:after { 
    content:"";
    position: absolute;
    right: 0px;
    left: 50%;
    height: 100%;
    background: #353845;
    margin-top: -950px;
    z-index: -1;
    }
    
#main-inner    { 
    position: relative;
    margin-right: auto;
    margin-left: auto;
    width: 400px;
    height: 950px;
    top: 75px;
    }

#main-inner-left { 
    position: absolute;
    left: 0px;
    top: 0px;
    width: 200px;    
    }    

#main-inner-right {  
    position: absolute;
    right: 0px;
    width: 200px;
    color: #fff; 
    }

JavaScript

// small fixed split layout