JSFiddle - React, Tailwind, and code Playground

by davidpauljunior

HTML

<div class="container">
    <div class="side">
      <div class="side_layout">
        hi sidebar
      </div>
    </div>
    <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ullamcorper, nulla id tincidunt commodo, risus leo pulvinar justo, eget vehicula felis ex vel tellus. Aliquam erat volutpat. Etiam sapien velit, gravida mattis elit at, fringilla aliquet massa. Integer a metus
  </div>
</div>

SCSS

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-color: #fff;
  background-image: linear-gradient(to right, #eaeaea 0%,#eaeaea 50%,#ffffff 50%,#ffffff 100%);
}


/* .bg::after {
  content: '';
  flex-basis: 50%;
  background-color: white;
} */

.container {
  display: flex;
  max-width: 600px;
  margin: auto;
  min-height: 100%;
}

.side {
  flex-basis: 25%;
  padding: 2rem;
}

.side_layout {
  float: right;
}

.content {
  min-height: 100%;
  flex-basis: 75%;
  padding: 2rem;
  background-color: white;
}

/* .container {
  min-height: 100%;
  max-width: 600px; // Change to rem
  margin: auto;
  display: flex;
  background-color: red;
}

.side {
  display: flex;
  flex-basis: 25%;
  padding: 2rem;
  min-height: 100%;
  background-color: lightGrey;
  position: relative;
}

.side:before {
  content: '';
  width: 100%;
  margin-right: -100%;
  background-color: lightGrey;
}

.content {
  flex-basis: 75%;
  padding: 2rem;
}

.content_inner {
  max-width: 400px;
} */