JSFiddle - React, Tailwind, and code Playground

by cemre

HTML

<div class="container">
    <div class="navigation">
        <div class="item">Navigation</div>
        <div class="item">Navigation</div>
        <div class="item">Navigation</div>
        <div class="fixed-anchor">
            <div class="fixed">
                Tadaa!
            </div>
        </div>
    </div>   

    <p>Try resizing the window. The fixed positioned item will follow the page structure and won't move along with the window's corner.</p>        
</div>

CSS

body {
    background: #eee;
}

.container {
    width: 400px;
    padding: 20px;
    height: 1000px;
    margin: 0 auto;
    background: #fff;
}

p {
    margin-top: 50px;
    margin-right: 50px;
}   

.item, .fixed-anchor {
    float: left;
    margin-right: 10px;
    position: relative;
}

.fixed {
    position: fixed;
    margin-left: 100px;
   
}