JSFiddle - React, Tailwind, and code Playground

by loren_hibbard

HTML

<div class="extra_margins">
    <p>
        Text
    </p>
</div>
<div class="relative_container">
    
    <div id="content_under" class="fixed_width">
        <div class="content">
            <input type="text" class="fl" />
            <input type="text" class="fl" />
            <br>
            <textarea>enter information</textarea>
        </div>
    </div>
    
    <div id="content_over" class="fixed_width">
        <div class="obscure">
        <p class="v">Add a line item</p>
        </div>
    </div>
    
</div>

<div class="extra_margins"><p>Text</p></div>

CSS

body{
    margin:10px; 
    background-color:#efefef;
}
.fixed_width, .content, .obscure{display: block;}
.fixed_width{
    width:700px; 
    height:100px; 
    padding:0px;
}
.obscure, .content{width:100%;height:100%;}
.content{
    background-color:#fff;
    margin-right:5px;

}
.obscure{
    outline: 5px dashed #888; 
    font-family:Sans-serif;
    color:#888;
    font-size: 18pt;
    text-align:center;
    background-color:transparent;
    background: rgb(255, 255, 255); 
    background: rgba(255, 255, 255, .7);
}
.obscure:hover{
    outline: 5px dashed #5e5eff; 
    color:#4747e3;
    background: rgba(140, 143, 253, .15);  
    cursor:pointer;
}
.v{ 
    position: relative; 
    top:36%; 
    height:18px; 
    margin-top:0px; 
    /*color:#4747e3;*/ 
    font-weight:bold;}

.relative_container {position:relative; height:100px;width:700px; padding:0px}

#content_over {position:absolute; top:0;}
#content_under {position:absolute; top:0;}



.extra_margins {margin:10px 0;}