JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<div class="content">
    <div class="uploadContainer">
        <div class="treeStructure">
        </div>
        <div class="rightControls">
            
            <div class="screenConfigurations">
                <div class="screenParameters">
                    <div class="screenContainer">
                    </div>
                    
                    <div class="inputParamsContainer">
                        <p class="indicatorText">
                            Screen size
                        </p>
                        <input type="text" class="screenSizeInput" placeholder="W"></input>
                        <input type="text" class="screenSizeInput" placeholder="H"></input>
                        
                    </div>

                    
                </div>
            </div>
            <div class="optionalConfigurations">
            </div>
            
        </div>
        
    </div>
    
</div>

CSS

.content
{
    width:100%;
    height:100%;
    
}
.uploadContainer
{
    width:500px;
    height:400px;
    border:1px solid rgb(240,240,240);
    border-radius:5px;
}
.treeStructure
{
    width:60%;
    height:100%;
    display:inline-block;
    background:blue;    
    
}
.rightControls
{
    width:40%;
    height:100%;
    display:inline-block;
    background:red;
    float:right;
}
.screenConfigurations
{
      width:100%;
    height:70%;
    background:cyan;
    
}
.optionalConfigurations
{
    width:100%;
    height:30%;
    background:magenta;
}
.screenParameters
{
    width:90%;
    height:75%;
    margin-right:auto;
    margin-left:auto;
    background:purple;
    padding-top:5px;
}
.screenContainer
{
    width:100px;
    height:100px;
    background:lightgrey;
    margin-right:auto;
    margin-left:auto;
 
}

.inputParamsContainer
{
    width:100%;
    height:40%;
    background:cornflowerblue;
    
}
.indicatorText
{
    color:#aaa;
    font-size:1.2em;
    
}
.screenSizeInput
{
     width:30px;
    height:40px;
    border-radius:5px;
    border:0;
    outline:none;    
}