JSFiddle - React, Tailwind, and code Playground

by Pedro Souza

HTML

<div class="wrapper">
  <div class="wrapper_child">
    <div id="home" class="tab">
      <h3 class="text-center align-middle">Home</h3>
    </div>

    <div id="gallery" class="tab">
      <h3 class="text-center align-middle">Gallery</h3>
    </div>

    <div id="about" class="tab">
      <h3 class="text-center align-middle">About us</h3>
    </div>

    <div id="contacts" class="tab">
      <h3 class="text-center align-middle">Contacts</h3>
    </div>
  </div>
</div>

CSS

.wrapper {
  height: 100vh;
  width: 100%;
  overflow-y: hidden;
  overflow-x: scroll;
}

.wrapper_child{
  width: 400%;
  height: inherit;
}

.wrapper_child > .tab {
  width: 25%;
  height: 100%;
  text-align: center;
  display: inline-block;
  margin-right: -4px;
}

#home {
  background-color: yellow;
}

#gallery {
  background-color: green;
}

#about {
  background-color: blue;
}

#contacts {
  background-color: red;
}