JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="example"></div>

<div id="top">
    <header>Header</header>
</div>


<main>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil qui alias vitae obcaecati sint quasi corporis animi officiis magni inventore possimus accusamus incidunt minima repellendus cum necessitatibus rem aperiam reiciendis voluptate magnam illo eveniet sed quam excepturi facilis nam quis fuga repudiandae iusto illum! Ipsa quidem optio laudantium. Impedit dicta dolore ut reiciendis repellendus adipisci? Tenetur vitae aliquam reiciendis ab possimus illum fuga necessitatibus voluptas asperiores sequi dolor sint iusto hic cupiditate accusantium explicabo fugiat consectetur architecto esse inventore praesentium earum error est deleniti provident amet repellendus. Praesentium aspernatur repellendus sunt eaque nihil blanditiis rerum quod impedit soluta id. Dignissimos ratione quidem reprehenderit labore beatae nobis non maxime hic repellendus esse minima eius explicabo modi distinctio fugit possimus minus! Facilis temporibus asperiores iste eligendi in veniam id reprehenderit quod molestiae illum aliquid et! Corporis non harum ratione fugit voluptatibus ab eveniet distinctio commodi explicabo ut rem suscipit dolores consectetur debitis ea! Ipsa beatae nisi sed officiis libero accusamus accusantium nostrum sapiente tempora est labore asperiores doloribus. Expedita incidunt odit at possimus reiciendis obcaecati quisquam hic quam iusto soluta facilis excepturi minima doloremque quasi tempore ratione facere deserunt doloribus aliquam itaque esse! Hic commodi consequuntur accusamus optio esse mollitia eius ea praesentium aut velit est quam dolore exercitationem quas autem quidem veniam ad rerum labore iste error! Quo mollitia blanditiis porro amet inventore nam excepturi enim quis sapiente id molestias sit minima veniam doloribus voluptates in vel. Exercitationem illum eligendi voluptates error voluptatum qui officia culpa delectus aliquam animi dicta ullam iusto neque amet aut...

CSS

/*

    #top doesn't have z-index and there's .example element above it it with position: absolute;
    .example goes below #top.

*/

#top { 
    position: fixed;
    left: 0; top: 0px; right: 0;
    border-bottom: 1px solid #c1c1c1;
    background: #fff;
    opacity: 0.9;
}

#top header, 
main {
    max-width: 500px;
    margin: 0px auto;
}

#top header {
    height: 100px;
    border-left: 1px dashed #c1c1c1;
    border-right: 1px dashed #c1c1c1;
}

main { margin-top: 100px; }

.example {
    background: red;
    width: 100%;
    height: 20px;
    position: absolute;
    top: 0px;
    left: 0px;
}