JSFiddle - React, Tailwind, and code Playground

selection buttons

HTML

<div class="wv-box">
  <div class="wv-card-bank--selection ">
    
    <div class="wv-card--bank--branded wv-card--bank--td">
      <div class="wv-card--bank__logo">
        <span class="wv-icon--bank wv-icon--bank--td"></span>
      </div>
      <div class="wv-card--bank__label">
        TD Canada Trust
      </div>
    </div>
    
    <div class="wv-card--bank--branded wv-card--bank--us-bank">
      <div class="wv-card--bank__logo">
        <span class="wv-icon--bank wv-icon--bank--us-bank"></span>
      </div>
      <div class="wv-card--bank__label">
        RBC
      </div>
    </div>
    
    <div class="wv-card--bank--branded wv-card--bank--bmo">
      <div class="wv-card--bank__logo">
        <span class="wv-icon--bank wv-icon--bank--bmo"></span>
      </div>
      <div class="wv-card--bank__label">
        BMO
      </div>
    </div>
    
    <div class="wv-card--bank--branded wv-card--bank--national-bank">
      <div class="wv-card--bank__logo">
        <span class="wv-icon--bank wv-icon--bank--national-bank"></span>
      </div>
      <div class="wv-card--bank__label">
        National Bank
      </div>
    </div>
    
    <div class="wv-card--bank--branded wv-card--bank--scotiabank">
      <div class="wv-card--bank__logo">
        <span class="wv-icon--bank wv-icon--bank--scotiabank"></span>
      </div>
      <div class="wv-card--bank__label">
        Scotiabank
      </div>
    </div>
    
    <div class="wv-card--bank--branded wv-card--bank--cibc">
      <div class="wv-card--bank__logo">
        <span class="wv-icon--bank wv-icon--bank--cibc"></span>
      </div>
      <div class="wv-card--bank__label">
        CIBC
      </div>
    </div>
    
    <div class="wv-card--bank--branded wv-card--bank--tangerine">
      <div class="wv-card--bank__logo">
        <span class="wv-icon--bank wv-icon--bank--tangerine"></span>
      </div>
      <div class="wv-card--bank__label">
        Tangerine
      </div>
    </div>
    
    <div...

SCSS

@import "https://s3.amazonaws.com/wave-buoyant/branches/next-buoyant-rc/buoyant-app.css";

body { padding: 16px; background: #F8FAFC; }

.wv-card-bank--selection {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  justify-content: center;
}

.wv-card--bank--branded {
  width: 22%;
  min-width: 140px;
  height: 40px;
  margin: 4px;
  justify-content: flex-start;
}

.wv-card--bank__label {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  font-weight: 500;    
  font-size: 14px;
  color: #FFF;
  overflow: ellipsis;
  display: inline;
  width: 60%;
  margin: 0;
  padding: 0;
}