JSFiddle - React, Tailwind, and code Playground

by khushboo097

HTML

<div class="panel">
  <div class="panel-opt opt-1">
    <div class="opt-num">
      <span class="opt-num-span">125</span>
    </div>
    <div class="opt-svg">

    </div>
    <span class="opt-span">Orders</span>
  </div>
  <div class="panel-opt opt-2">
    <div class="opt-num">
      <span class="opt-num-span">125</span>
    </div>
    <div class="opt-svg">

    </div>
    <span class="opt-span">Orders</span>
  </div>
  <div class="panel-opt opt-3">
    <div class="opt-num">
      <span class="opt-num-span">125</span>
    </div>
    <div class="opt-svg">

    </div>
    <span class="opt-span">Orders</span>
  </div>
  <div class="panel-opt opt-4">
    <div class="opt-num">
      <span class="opt-num-span">125</span>
    </div>
    <div class="opt-svg">

    </div>
    <span class="opt-span">Orders</span>
  </div>
</div>

CSS

.panel {
  display: flex;
  flex-direction: row;
  height: fit-content;
  margin-top: 30px;
  justify-content: space-around;
}

.panel-opt {
  display: flex;
  flex-direction: column;
  width: 114px;
  height: 114px;
  border: solid 0.5px #707070;
  background-color: #ffffff;
  margin: 0 20px;
}