JSFiddle - React, Tailwind, and code Playground

by Serhii Matrunchyk

HTML

<div class="legend">
  <div class="colors">
    <div class="title">
      Colors Map
    </div>
    
  </div>
  <div class="shapes">
    <div class="title">
      Shapes Map
    </div>
  </div>
</div>

CSS

.legend {
  display: grid;
  background: lightblue;
  grid-template-columns: repeat(2, max-content);
  grid-gap: 15px;
}