JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="cf tabs">
        <li>Tab 1</li>
        <li>Tab 2</li>
    </ul>
    <div style="margin-top: 40px; padding-bottom: 30px; position:relative">
        <div style="position:absolute;top:300px; height:100px; width: 250px; left:200px; border: 1px solid purple;">aaa</div>

        <div style="position:absolute;top:0px; height:100px; width: 100px; left:100px; border: 1px solid purple;">bbb</div>
        
        <div style="position:absolute;top:450px; height:100px; width: 250px; left:400px; border: 1px solid purple;">ccc</div>
    </div>
    <div class="cf footer">Copyright &copy;</div>

CSS

ul.tabs {
            list-style-type: none;
            list-style-position: outside;
            padding:5px;
            margin: 0;
            position:fixed;
            top:0;
            z-index: 999;
            background-color: white;
            left:0;
            right:0;
            border-bottom: 1px solid green;
            opacity: 0.7;
        }
        ul.tabs li {
            float: left;
            margin:1px;
            padding: 4px 10px 2px 10px;
            border: 1px solid black;
        }


        div.footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right:0;
            background-color:#DEDEE9;
            border-top: 3px outset #BBBBBB;
            padding: 5px;
            opacity: 0.6;
        }

        .cf:before,
        .cf:after {
            content: " "; 
            display: table; 
        }
        .cf:after {
            clear: both;
        }