JSFiddle - React, Tailwind, and code Playground

by NexusDeveloper

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row wrapper">
    <div class="col-3 sidebar">
      <div class="background"></div>
    </div>
    <div class="col-9 content"></div>
  </div>
</div>

CSS

.wrapper {
  min-height: 100vh;
}

.background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: -100%;
  margin: auto;
  background: linear-gradient(247.24deg, rgba(127, 240, 255, 0.3) 0%, rgba(221, 19, 221, 0.3) 101.17%);
}

.sidebar-2 {
  background: rgba(0, 255, 0, 0.4);
}

.absolute {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}