JSFiddle - React, Tailwind, and code Playground

by sanjeevks121

HTML

<div class="mc_wrapper">
  <div class="mp-pusher" id="mp-pusher">
    <nav>Side Nav</nav>
    <div class="scroller">
      <header>
        <h1>this is header</h1>
      </header>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
    </div>
  </div>
</div>

CSS

body {
	margin: 0;
	padding: 0;
}
html, body, .mc_wrapper, .scroller {
	height: 100%;
}
.scroller {
	overflow-y: scroll;
}
.scroller, .scroller-inner {
	position: relative;
}
.mc_wrapper {
	position: relative;
	overflow: hidden;
}
.mc_container {
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
}
header {
	width: 100%;
	height: 100px;
	background: #ff0000;
	position: fixed;
}
header h1 {
	color: #ffffff;
}
.mp-pusher {
	position: relative;
	left: 0;
	height: 100%;
	transform: translate3d(0px, 0px, 0px) !important;
}