JSFiddle - React, Tailwind, and code Playground

by Serhii Matrunchyk

HTML

<div class="legend">
  <div class="colors">
    <div class="title">
      Colors map
    </div>
    <div class="diseases">
      <div class="disease-group">
        <div class="disease legend-item">Disease 1kj kj kjkj kj kj kj kj kj kj kj Disease 1kj kj kjkj kj kj kj kj kj kj kj Disease 1kj kj kjkj kj kj kj kj kj kj kj</div>
        <div class="mutations">
          <div class="legend-item">Mutation 1.1</div>
          <div class="legend-item">Mutation 1.2</div>
        </div>
      </div>
      
      <div class="disease-group">
        <div class="disease legend-item">Disease 2</div>
        <div class="mutations">
          <div class="legend-item">Mutation 2.1</div>
        </div>
      </div>
      
      
      <div class="disease-group">
        <div class="disease legend-item">Disease 3</div>
        <div class="mutations">
          <div class="legend-item">Mutation 3.1</div>
          <div class="legend-item">Mutation 3.2</div>
          <div class="legend-item">Mutation 3.3</div>
        </div>
      </div>
      
      <!--
      <div class="disease-group">
        <div class="disease legend-item">Disease 4</div>
        <div class="mutations">
          <div class="legend-item">Mutation 4.1</div>
          <div class="legend-item">Mutation 4.2</div>
          <div class="legend-item">Mutation 4.3</div>
        </div>
      </div>
      -->
    </div>
  </div>
  
  <div class="shapes">
    <div class="title">
      Shapes map
    </div>
    <div class="phenotypes">
      <div class="legend-item">Shape 1</div>
      <div class="legend-item">Shape 2</div>
      <div class="legend-item">Shape 3</div>
      <div class="legend-item">Shape 4</div>
      <div class="legend-item">Shape 5</div>
    </div>
  </div>

</div>

SCSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.legend {
  display: grid;
  margin: 0 30px;
  grid-template-columns: minmax(40%, 50%) minmax(50%, 60%);
  padding: 10px;
  grid-gap: 15px;
  border-radius: 10px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2), 0 -8px 15px 0 rgba(0, 0, 0, 0.14);
  font-family: 'Poppins', sans-serif;
}

.title {
  font-weight: bold;
  color: #2297f3;
  font-size: 12px;
}

.diseases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 10px;
  font-size: 10px;
  max-height: 100px;
  overflow-y: scroll;
}

.disease-group {
  margin-top: 15px;
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: row;
  align-content: start;
  padding-right: 15px;
}

.mutations {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: row;
}

.legend-item {
  border-radius: 5px;
  background: #f7f9fa;
  color: #464646;
  padding: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}


.phenotypes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
  font-size: 10px;
  margin-top: 15px;
  position: relative;
}

.phenotypes::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 1px;
  left: -21px;
  border-left: 1px solid gray;
}