JSFiddle - React, Tailwind, and code Playground

by Jitendra Zaa

HTML

<!doctype html>
<title>Example</title>
 
<div class="container">
  <div class="black">Capability
    <div class="blue">Platform 
          <div class="darkgreen">
            Technology
          </div>
          <div class="darkgreen">
            Technology
          </div>
          <div class="darkgreen">
            Technology
          </div> 
    </div>
    <div class="blue">Capability</div>
  </div> 
    <div class="black">Capability 
    	<div class="blue">
          Platform
          <div class="darkgreen">
            Technology
          </div>
          <div class="darkgreen">
            Technology
          </div>
          <div class="darkgreen">
            Technology
          </div> 
    </div>
    <div class="blue">Capability</div>
  </div>
</div>

CSS

.container { 
  display: flex;
  }
.black {
  background: black;
  display: flex;
  flex-direction: column;
}
.green {
  background: yellowgreen;
}
  .darkgreen {
  background: green;
}
.blue {
  background: steelblue;
}
.container div {
  font-size: 2vw;
  padding: .5em;
  color: white;
  flex: 1;
  margin-bottom:2px;
  margin-right:2px;
}