JSFiddle - React, Tailwind, and code Playground

by Amens

HTML

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Some graphical objects to use -->
  <defs>
<symbol id="icon-circle" viewBox="0 0 29 32">
<title>circle</title>
<path fill="#fff" style="fill: var(--color1, #fff)" d="M14.159 0.002c-1.237 0.020-2.456 0.271-3.644 0.597-1.614 0.474-3.144 1.232-4.506 2.219-0.239 0.14-0.45 0.309-0.646 0.504-0.191 0.127-0.417 0.216-0.535 0.429-0.398 0.538-0.926 0.964-1.38 1.454-0.67 0.668-1.142 1.497-1.608 2.312-1.52 2.761-2.203 6.028-1.65 9.151 0.227 1.334 0.688 2.617 1.26 3.84-1.128-2.732-1.281-5.796-0.75-8.683 0.513-2.467 1.63-4.831 3.325-6.706 1.723-1.825 3.875-3.271 6.278-4.025 1.217-0.394 2.491-0.578 3.767-0.63 0.414-0.021 0.828-0.121 1.242-0.035 1.108 0.090 2.214 0.258 3.278 0.587 0.248-0.012 0.461 0.102 0.672 0.216 0.19 0.104 0.418 0.079 0.587 0.227 0.323 0.153 0.676 0.234 1.002 0.381 0.582 0.426 1.261 0.701 1.848 1.122 0.683 0.441 1.359 0.893 2.009 1.382-0.705-0.946-1.614-1.751-2.681-2.267-0.213-0.161-0.398-0.383-0.68-0.412-0.443-0.157-0.827-0.488-1.304-0.539-0.138-0.119-0.305-0.2-0.48-0.229-0.168-0.125-0.34-0.283-0.564-0.26-0.318-0.103-0.664-0.074-0.982-0.153-0.599-0.306-1.285-0.28-1.935-0.37-0.639-0.066-1.281-0.127-1.923-0.111zM28.44 10.648c0.176 1.211 0.309 2.43 0.376 3.652 0.065 2.748-0.709 5.503-2.146 7.841-0.189 0.259-0.43 0.484-0.533 0.796-0.182 0.294-0.434 0.54-0.636 0.823-0.5 0.656-1.133 1.191-1.747 1.735-1.081 0.924-2.315 1.66-3.633 2.19-0.615 0.39-1.355 0.477-2.038 0.692-1.097 0.278-2.222 0.526-3.361 0.455-0.377-0.007-0.768 0.071-1.137-0.008-0.184-0.095-0.39-0.131-0.591-0.094-0.403-0.032-0.786-0.224-1.191-0.21-0.208 0.055-0.412 0.006-0.604-0.075-1.371-0.385-2.709-0.91-3.925-1.656-1.819-1.103-3.422-2.565-4.689-4.273-0.223-0.313-0.43-0.638-0.621-0.971 1.056 2.080 2.544 3.998 4.536 5.252 1.427 0.966 3.042 1.625 4.704 2.059 0.451 0.168 0.949 0.098 1.398 0.27 0.354 0.085 0.72 0.075 1.080 0.118 0.456 0.023 0.91-0.042 1.366-0 0.473 0.032 0.942-0.040 1.408-0.1...

SCSS

$rightbar-width: 70px;

.wrapper {
  display: grid;
  background: #FFF;
  grid-template-columns: $rightbar-width auto 320px;
}

figure {
  margin: 0;

  img {
    max-width: 100%;
    position: absolute;
  }
}

.svg-bg svg {
  width: 100%;
}

.rightbar {
  min-height: 100vh;
}

.leftbar {
  min-height: 100vh;
}

.main {
  min-height: 100vh;
}

.ui1 {
  background: #333;
  color: #FFF;
}

.ui2 {
  background: #444;
  color: #EEE;
}

.circle {
  border-radius: 100%;
  width: $rightbar-width - 10;
  box-sizing: border-box;
}

.border1 {
  border: 2px solid #FFF;
}

.centered {
  text-align: center;
}