JSFiddle - React, Tailwind, and code Playground

by Artem Borovikov

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi architecto voluptatem obcaecati hic saepe atque earum pariatur reprehenderit non facilis iste, voluptatibus tempora, dolorum quas quaerat blanditiis! Pariatur quas, necessitatibus.
<div class="wrapper">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente facere maxime harum cupiditate fugiat velit quibusdam ea officiis tenetur perspiciatis repellat quia, consequuntur ipsum impedit unde enim quo quos. Natus.
    
    <div class="fixed fixed1">
        <div class="fixed fixed2"></div>
    </div>
</div>

CSS

body {
    font-size: 30px;
}

.wrapper {
    position: relative;
    height: 120vh;
    max-height: 300px;
    background-color: red;
    overflow: hidden;
    font-size: 100px;
}

.fixed1 {
    position: fixed;
    top: 30px;
    left: 30px;
    width: 120px;
    height: 120px;
    padding: 30px;
    background: blue;
}

.fixed2 {
    position: fixed;
    top: 15px;
    left: 15px;
    width: 60px;
    height: 60px;
    background-color: green;
}