JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<div id="container">
    
    <div id="stuff"></div>
    
    
    <div id="stickyBanner">
        
        vbnvbn 
    </div> 
    
    <div class="things"></div>
    <div class="otherThings"></div>
    <div class="things"></div>
    <div class="otherThings"></div>
    <div class="things"></div>
    <div class="otherThings"></div>
    <div class="things"></div>
    <div class="otherThings"></div>
    <div class="things"></div>
    <div class="otherThings"></div>
    <div class="things"></div>
    <div class="otherThings"></div>
    <div class="things"></div>
    <div class="otherThings"></div>
    <div class="things"></div>
    <div class="otherThings"></div>
    <div class="things"></div>
    <div class="otherThings"></div>
    <div class="things"></div>
    <div class="otherThings"></div>
</div>

CSS

#container {height: 5000px;}
#stuff {width: 960px; height: 120px; background: #ffe3e3;}
#stickyBanner {width: 960px; z-index: 99999;}
	#stickyBanner .stickyToggle {width: 960px; height: 30px; background: #333333; cursor: pointer;}
	#stickyBanner .stickyLinks {width: 960px; height: 70px; background: #e3e3e3; opacity: 0.5;} 
  .fixed{position: fixed;top: 120px}