JSFiddle - React, Tailwind, and code Playground

by sundaramkumar

HTML

<div class="header">
      <h3>
      Kumar Sundaram
      </h3>
    </div>
<div class="outer-wrapper">

  <div class="wrapper">

    <div class="slide one">one</div>
    <div class="slide two">two</div>
    <div class="slide three">three</div>
    <div class="slide four">four</div>
  </div>
</div>

CSS

body {
  margin:0;
  padding:0;
}
.slide {
  width: 100vw;
  height: 100vh;
}
.header {
  width: 200px;
  height: 100vh;
    padding: 10px;
    position:absolute;
    clear: both;
  background-color: #F06D4E;
  z-index:100;
  left:0px;
  top:0px;

}
  
  h3{
    text-align: center;  
  }
.wrapper {
  display: flex;
  flex-direction: row;
  width: 400vw;
    transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
}
.one {
  background: #efdefe;
}
.two {
  background: #a3f3d3;
}
.three {
  background: #0bbaa0;
}
.four {
  background: #00dfdf;
}
.outer-wrapper {
  width: 100vh;
  height: 100vw;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  overflow-y: scroll;
  overflow-x: hidden;
  position: absolute;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
::-webkit-scrollbar {
  display:none;
}