JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="app">
  <div class="background"></div>
  <div class="sidebar">
    <div class="text">
      <h1>Hello there, Klarnaut!</h1>
      <p>Klub is the internal platform where Klarnauts come together. Join the world of smoooth.</p>
      <button>Google</button>
    </div>
    <div class="note">All information on this site is for internal use only.</div>
  </div>

</div>

SCSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: auto;
}

.sidebar {
  flex-grow: 1;
  padding: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  
  h1, p  {
    margin-bottom: 30px;
  }
  
  .note {
    margin-top: auto;
  }
}

.background {
  height: 45vh;
  width: 100%;
  background: #ffb3c7;
}

@media screen and (min-width: 768px) {
  .app {
    flex-direction: row;
    align-items: stretch;
    height: 100vh;
  }
  .background {
    height: 100%;
    flex-grow: 1;
    order: 1;
  }
  
  .sidebar {
    height: 100%;
    width: 40%;
  }
  
  .text {
    margin-top: auto;
  }
}