JSFiddle - React, Tailwind, and code Playground

by rao kantipudi

HTML

<div id='jqxSplitter'>
    <div style="background-color: #97FFAF"></div>    
    <div style="background-color: #E8C0AF">
        <div id='vSplitter'>
          <div style="background-color: #88C0AF"></div>
          <div>
            <div style="background-color: #CCC0AF"></div>
            <div class="bPanel" style="background-color: #CDC0AF">
              <input type="button" value="save">
              <input type="button" value="cancel">              
            </div>
          </div>
            
        </div>
    </div>
</div>

CSS

.bPanel{
	  position: fixed;
    bottom: -6px;
    width: 100%;
    background-color: white;
    margin-bottom: 6px;
    padding-top: 9px;
    margin-top: 15px;
    padding-bottom: 6px;
    padding-left: 30px;
    border-top: 3px solid rgba(0,0,0,0.1);  
};

JavaScript

$("#jqxSplitter").jqxSplitter({
   width: '600px',
   height: '600px'
});

$("#vSplitter").jqxSplitter({
   width: '100%',
   height: '100%',
   orientation:'horizontal'
});