JSFiddle - React, Tailwind, and code Playground

by Pratik Galoria

HTML

<div class="container">
    <div class="main">
      <div class="side-panel">
        <div class="sp-logo">

        </div>
        <div class="sp-stepper">

        </div>
        <div class="sp-testimonials">

        </div>
        <div class="sp-buttons">

        </div>
      </div>
      <div class="content">
        <div class="c-breadcrum-wrapper">
          <div class="c-breadcrumb">

          </div>
        </div>
        <div class="c-step">
          <div class="c-s-animation">
          
          </div>
        </div>
      </div>
    </div>
  </div>

CSS

* {
  margin: 0;
}

.container {
  position: absolute;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  overflow-x: hidden;
  overflow-y: auto;

  display: flex;
  flex-direction: column;
}

.main {
  display: flex;
  height: 100%;
}

.side-panel {
  background: #0d1a33;
  overflow-y: auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  flex: 0 0 320px;
}

.sp-logo {
  border: 1px solid #fff;
  width: 160px;

  flex: 0 0 56px;
}

.sp-stepper {
  border: 1px solid #fff;
  width: 320px;

  flex: 0 0 81px;
}

.sp-testimonials {
  border: 1px solid #fff;
  width: 250px;

  flex: 0 0 300px;
}

.sp-buttons {
  border: 1px solid #fff;
  width: 227px;

  flex: 0 0 110px;
}

.content {
  background-image: linear-gradient(234deg, #0085c7, #6359ca);
  overflow-y: auto;

  display: flex;
  flex-direction: column;
  align-items: center;

  flex: 1 0 auto;
}

.c-breadcrumb-wrapper {
  position: absolute;
}

.c-breadcrumb {
  border: 1px solid #fff;
  width: 178px;
}

.c-step {
  width: 90%;
  border: 1px solid #fff;
  
  position: relative;
  overflow-y: hidden;
  margin-top: 60px;
  
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.c-s-animation {
  width: 90%;
  border: 1px solid blue;
  position: relative;
  bottom: -50px;
  transition: bottom .5s ease-out;
  
  flex: 1 0 auto;
}

.c-s-animation:hover {
  bottom: 0px;
}

@media (max-width: 768px) {
  .main {
    flex-direction: column;
  }
  .side-panel {
    flex: 0 0 196px;
    flex-wrap: wrap;
    flex-direction: row;
  }
  .sp-logo {
    height: 80px;

    flex: 1 0 auto;
    align-self: flex-start;
  }
  .sp-buttons {
    height: 80px;

    flex: 1 0 300px;
    align-self: flex-start;
  }
  .sp-testimonials {
    display: none;
  }
  .sp-stepper {
    flex: 1 0 auto;
    order: 1;
  }
}

@media (max-width: 460px) {
  .main {
    flex-direction: column;
  }
  .side-panel {
    flex: 0 0...