JSFiddle - React, Tailwind, and code Playground

by Ian Sanders

HTML

<div id="topbar">TOP BAR</div>
<div id="secondtopbar">SECOND TOP BAR</div>
<div id="logo">LOGO</div>
<div id="content">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sem dui, mollis sit amet gravida a, pharetra eu nibh. Cras ultricies faucibus tellus, a aliquam urna posuere ut. Donec a sem orci, sed euismod purus. Donec molestie gravida magna eget accumsan. Integer elementum vulputate purus, blandit sagittis nulla dictum ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum suscipit mattis vestibulum. Phasellus adipiscing tincidunt sapien eget semper. Vestibulum ultrices pellentesque dignissim. Ut iaculis ullamcorper felis ut dictum. Sed a magna orci. Nam congue, lectus a ullamcorper placerat, mauris ligula ultricies lacus, vitae pulvinar mi odio id nisl.

Vestibulum quis cursus erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut aliquam ligula. Cras vestibulum mi blandit tortor convallis rhoncus. Nam et nisi quis velit varius dictum ac vel enim. Duis facilisis, augue in aliquet vehicula, lectus dui dapibus dui, vel commodo lacus libero vitae leo. Aenean laoreet condimentum quam at molestie. Nam non diam eget ligula vehicula feugiat. Morbi placerat justo ante. Suspendisse orci tellus, adipiscing id egestas quis, egestas sit amet orci. Nulla varius velit vel ligula volutpat porta at et est. Curabitur sagittis, velit id tristique sodales, nibh ante iaculis sapien, sit amet ullamcorper augue nisl at ante.

Nam enim velit, lacinia sed convallis vitae, tempor ut purus. Vivamus feugiat, dolor non dignissim dapibus, dolor orci egestas nunc, rhoncus tempor lectus tortor vitae enim. Aenean sed nunc neque, in pharetra velit. Phasellus molestie, felis nec placerat placerat, massa nulla aliquam dui, ac posuere tellus felis nec odio. Curabitur congue, leo id facilisis cursus, magna odio euismod odio, at gravida magna magna id mi. Nulla accumsan eleifend suscipit. Aliquam erat...

CSS

#topbar {
        height: 20px;
        width: 100%;
        position: fixed; /*so it doesn't scrol with the page*/
        left: 0;
        background: red;
        top: 0;
        z-index: 3; /*the bar on top gets the highest index because it's above everything else*/
    }
    #secondtopbar {
        height: 20px;
        width: 100%;
        position: fixed;
        top: 20px;
        left: 0;
        background: blue;
        z-index: 1; /*the second bar on top gets the lowest index because it's below everything else except the text, with doesn't even get a z-index*/
    }
    #logo {
        opacity: 0.5; /*this makes it half-transparent, on a scale from 0-1*/
        height: 100px;
        width: 100px;
        position: absolute;
        top: 30px;
        left: 30px;
        background: green;
        z-index: 2; /*the logo gets the middle index because it's in between*/
    }