JSFiddle - React, Tailwind, and code Playground

by Alireza Safian

HTML

<div class="container">
        <div id="sidebar">
            This is the siderbar of the page

<br><br>
                Select Gender
                <select name="gender">
                    <option value="">Select</option>
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                </select>

            <hr>
            <label for="amount">Age range:</label>
            <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
            <div id="slider-range"></div>

</div>
<div id="header">
            <h1>This is the header of the page</h1>
        </div>
        <div id="content">

            This is content page..

        </div>  
        <div id="footer">This is the footer of the page..</div>
    </div>

CSS

html,body,.container { position:relative;height: 100%;}

    #sidebar {
        position:absolute;
        padding: 0.5%;
        top:0; bottom:0; left:0;
        width:20%;
        margin-left: 1.5%;
        margin-top: 7%;
        margin-bottom: 6.5%;
        background: #ff0;
    }

    #header { border:1px solid #000; width:100%; height:10%; 
        margin:0 0 5px 0;
    }

    #content { border:1px solid #000; width:77%; height:80%;
        position: absolute;
        margin-left: 23%;
    }
    #footer { border:1px solid #000; width:100%; height:10%;
        margin-top: 80%;
    }