JSFiddle - React, Tailwind, and code Playground

by oobarbazanoo

HTML

<div class="container">
  <div class="a">

  </div>
  <div class="b">

  </div>
  <div class="b">

  </div>

</div>

CSS

.container {
  display: flex;
  justify-content: center;
  background: yellow;
}

.container * {
  width: 10px;
  height: 10px;
  background: green;
  border: 2px solid red;
}

.a {
  justify-self: start;
}

JavaScript

debugger;
const svg = d3.select("#drawRegion")
  .append("svg")
  .attr("width", "100%")
  .attr("height", "100%");
svg.append("rect")
  .attr("x", "0")
  .attr("y", "0")
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("fill", "yellow")

  .append("rect")
  .attr("x", "0")
  .attr("y", "0")
  .attr("height", "100%")
  .attr("width", "100%")
  .attr("fill", "yellowgreen");