JSFiddle - React, Tailwind, and code Playground

by rzea

HTML

<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione esse consectetur reprehenderit tempora similique omnis voluptatum, iste magni, commodi nobis fuga perferendis atque sed ab nam quas qui fugiat expedita ea asperiores consequuntur dicta!</p>
<div class="buttons-ctnr-wide">
  <p>This bar #1 is sticky</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, rem.</p>
<div class="tab-content">
  <div class="buttons-ctnr-wide">
    <p>This bar #2 is sticky</p>
  </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor accusantium impedit nihil, ipsa quaerat pariatur fugit quidem aperiam consectetur, corporis, obcaecati, facilis beatae voluptates velit. Deserunt voluptate fugit sint magni commodi ad laborum reiciendis aut accusantium, aliquid incidunt unde quaerat a pariatur, modi vero! Eum tempora provident quo expedita, qui ratione ipsam voluptatem atque quibusdam quis a dolor fugiat ipsum minus illum dicta, itaque amet sit veniam eveniet illo commodi animi! Eaque nisi sunt incidunt libero amet consequatur obcaecati voluptatum laboriosam, molestias natus quos! At accusamus similique omnis facilis excepturi aspernatur nam totam reiciendis autem, eius explicabo assumenda doloribus nobis laborum soluta sapiente tenetur distinctio voluptatum iusto cupiditate aliquam, nesciunt, eligendi temporibus dolorum. Veniam accusamus facilis, vel tenetur quidem, id amet facere ipsum illo at eos doloremque architecto veritatis cupiditate laudantium iste error iusto, fugit, maxime corporis non velit saepe ea! Magnam quod non minus amet ut, recusandae repudiandae itaque, impedit, culpa nesciunt quis! Nihil, quo ex laudantium sequi eius officiis suscipit ad maiores repellendus quis pariatur, ipsam sapiente autem saepe. Deserunt nisi suscipit, consequuntur esse nobis excepturi earum, neque ratione ipsum quos nemo reiciendis modi praesentium. Autem ipsa quidem nihil rem similique magni...

CSS

.buttons-ctnr-wide {
  position: sticky;
  top: 0;
}


/* Stuff not needed for demo*/
.tab-content {
  border: red 1px solid;
}

.buttons-ctnr-wide {
  padding: 5px 15px;
  background: blue;
}
.tab-content .buttons-ctnr-wide { background: orange; }