JSFiddle - React, Tailwind, and code Playground

by Phil Button

HTML

<input type="checkbox" class="checkbox">
<div class="menu"> 
  <p>
    MENU
  </p>
</div>
<div class="content">
<div class="container" id="container">   
    
      <section class="image" style="background-image: url(images/shower.jpg)"></section>
      <section class="heading">
        <h1 class="headingtext">Bathroom design</h1>
      </section>
      <section class="text" style="--bg: #c8c8bc">
        <h1 class="texttext">Complete bathroom renovations</h1>
      </section>
      
      <section class="image" style="background-image: url(images/kitchen.jpg)"></section>
      <section class="heading">
        <h1 class="headingtext">Kitchen design</h1>
      </section>
      <section class="text" style="--bg: #c8c8bc">
        <h1 class="texttext">Complete kitchen renovations</h1>
      </section>
      
      <section class="image" style="background-image: url(images/bench.jpg)"></section>
      <section class="heading">
        <h1 class="headingtext">Custom joinery</h1>
      </section>
      <section class="text" style="--bg: #638a87">
        <h1 class="texttext">All work carried out to a very high standard. Satisfaction guaranteed. Honest, prompt, tidy & fair.</h1>
      </section>
      
      <section class="image" style="background-image: url(images/wardrobe.jpg)"></section>
      <section class="heading">
        <h1 class="headingtext">Wardrobes</h1>
      </section>
      <section class="text" style="--bg: #384558">
        <h1 class="texttext">Bedroom wardrobe installation. Flat pack assembly. Carpentry, door fitting, skirting.</h1>
      </section>
      
      <section class="image" style="background-image: url(images/toilet.jpg)"></section>
      <section class="heading">
        <h1 class="headingtext">Plumbing</h1>
      </section>
      <section class="text" style="--bg: #9dbdc4">
        <h1 class="texttext">Free estimates and advice. Will beat any quote.</h1>
      </section>
      
      <section class="image" style="background-image:...

CSS

.menu {
  display: block;
  position: absolute;
  height: 100%;
  width: 100px;
  left: -100px;
  top: 40px;
  background-color: blue;
  z-index: 10;
}
.checkbox {
  display: block;
  position: absolute;
  left: 0;
}
.content {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 40px;
  background-color: yellow;
}
input[type="checkbox"]:checked ~ .menu {
  left: 0;
}
input[type="checkbox"]:checked ~ .content {
  left: 100px;
}