JSFiddle - React, Tailwind, and code Playground

by Alexandru Iorgu Weisz Cucoli

HTML

<div id="page" class="hfeed site">
	
	<header id="parent" class="site-header" role="banner">
		<div class="child"><!-- .header-wrap -->
		</div>
	</header><!-- #masthead -->

	
	<div class="content">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at dui in quam placerat aliquet. In semper lectus sed lectus iaculis blandit. Etiam egestas ex ac rhoncus commodo. Praesent sagittis eget ante nec interdum. Suspendisse tempus est ac libero rhoncus, laoreet pulvinar mi sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent quis tincidunt ipsum. Mauris nec arcu mollis, pellentesque nisi vitae, gravida sem. Duis vel velit vel lectus rhoncus luctus a vitae nulla. Nunc nec enim sapien. Quisque tempus dolor at viverra pharetra. Vivamus molestie bibendum sapien, vitae iaculis nisl fringilla euismod. Integer quis tincidunt ligula, at vulputate risus.

In vitae purus nec massa viverra mattis quis id lacus. Pellentesque cursus sapien nec tortor faucibus, sit amet sodales tortor faucibus. Aliquam pulvinar sollicitudin urna, ac suscipit sapien venenatis quis. Morbi eu risus in massa pretium molestie. Fusce rhoncus orci in ornare consectetur. Sed volutpat tristique nibh congue finibus. Integer semper sagittis sem vitae varius. Sed sit amet tellus in justo dictum fringilla. Pellentesque dignissim congue nulla non tincidunt. Etiam tempor ante metus, vel pretium est dapibus at.

Etiam eu consequat leo, sit amet placerat ex. Nullam sit amet lectus turpis. Curabitur ac euismod mauris, quis semper ex. Proin efficitur, odio nec tempus blandit, mauris nisl commodo turpis, a tempor lectus purus quis ex. Aliquam id ipsum risus. Mauris quis massa ut dui porttitor pharetra. Nulla aliquam tellus vitae odio rutrum efficitur. Vivamus accumsan iaculis augue, sit amet dignissim turpis aliquam sed.

Quisque finibus fringilla est vitae lobortis. Duis quis egestas nunc, vel ultricies velit. Sed blandit dolor erat, eu placerat tellus ornare dictum. Suspendisse...

CSS

header{
  position: fixed
  
}

/*#masthead */
    /*top: 25px;*/
#parent { 
    background: url('https://ladyfx.ae/wp-content/uploads/2018/01/upper-menu-bg.png') repeat-x center 8px;
    height: 151px;
    width: 100%;
    background-attachment: fixed;
}
/*.header-wrap*/
#parent .child {
    background: url('https://ladyfx.ae/wp-content/uploads/2018/03/menu-bg.png') no-repeat 50% 0px;
    padding-top: 0px;
    height: 170px;
}
#parent, #parent .child{
pointer-events: none;
}
#parent .child .container{
pointer-events: all;
}