JSFiddle - React, Tailwind, and code Playground

by tonkec palonkec

HTML

<div class="main">
    <div class="fixed">I am fixed element. Scroll to see!</div>
    <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium numquam repellat neque nostrum rerum iste delectus molestiae cum eveniet optio consequuntur veritatis quae omnis! Reprehenderit itaque dignissimos consequuntur velit repellat a recusandae rem culpa! Doloribus neque quae consequuntur fugiat eveniet porro voluptatum ipsum expedita consectetur quis quam aliquid rem culpa.
    </div>
     <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium numquam repellat neque nostrum rerum iste delectus molestiae cum eveniet optio consequuntur veritatis quae omnis! Reprehenderit itaque dignissimos consequuntur velit repellat a recusandae rem culpa! Doloribus neque quae consequuntur fugiat eveniet porro voluptatum ipsum expedita consectetur quis quam aliquid rem culpa.
    </div>
     <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium numquam repellat neque nostrum rerum iste delectus molestiae cum eveniet optio consequuntur veritatis quae omnis! Reprehenderit itaque dignissimos consequuntur velit repellat a recusandae rem culpa! Doloribus neque quae consequuntur fugiat eveniet porro voluptatum ipsum expedita consectetur quis quam aliquid rem culpa.
    </div>
     <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium numquam repellat neque nostrum rerum iste delectus molestiae cum eveniet optio consequuntur veritatis quae omnis! Reprehenderit itaque dignissimos consequuntur velit repellat a recusandae rem culpa! Doloribus neque quae consequuntur fugiat eveniet porro voluptatum ipsum expedita consectetur quis quam aliquid rem culpa.
    </div>
     <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium numquam repellat neque nostrum rerum iste delectus molestiae cum eveniet...

CSS

html,body {
    height: 100%;
    padding: 0;
    margin: 0;
}

.main {
    height: 1000px;
    background: #336E7B;
    font-weight: 300;
    padding: 10px;
}

.text {
    color: #fff;
    font-size: 18px;
    margin-top: 20px;
}

.fixed {
    position: fixed;
    background: #1BBC9B;
    width: 100%;
    height: 50px;
    color: #fff;
}