JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fixed-panel-top">
		<!-- Navbar -->
		<div class="custom-navbar-example"></div>
	
		<!-- Top fixed content area -->
		<div class="fixed-content-top">
		</div>                         

       <div class="container relative-content">
    </div>
    
	</div>

CSS

#fixed-panel-top {
			width: 800px;
            height: 800px;
			margin-left: auto;
			margin-right: auto;
		}
		
		.custom-navbar-example {
			height: 40px;
			background-color: yellow;
			z-index: 1030;
            left: 0;
            position: fixed;
            right: 0;
            top: 0;
		}
		
		.fixed-content-top {
			height: 200px;
			background-color: blue;
            left: 0;
            position: fixed;
            right: 0;
            top: 41px;
		}
		
		.relative-content {
			width: 800px;
			margin-top: 300px;
			height:500px;
			background-color: red;
			z-index: 10;
            position: relative;
		}