JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<div class="content">
  <div class="router">
    <div class="coins">
      <div class="coin1"></div>
      <div class="coin2"></div>
    </div>
  </div>
</div>

CSS

.content {
  display: flex;
}

.router {
  background: #933;
  margin: 0 auto;
  padding: 1em 0;
}

.coins {
  background: #393;
  --col-width: 200px;
  display: flex;
  flex-flow: row;
  padding: 1em 0;
}

.coins > div {
  background: #339;
  width: var(--col-width);
  display: flex;
  align-items: center;
  flex-flow: column;
  margin: 0 50px;
  padding: 1em 0;
}