JSFiddle - React, Tailwind, and code Playground

by Calvin Tomkins

HTML

<div class="container">
  <div class="grid">
    <div class="sales-thismonth block">
      <div class="title">Sales This Month</div>
      <div class="large-value" id="salesthismonth">£1,053,881</div>
      <div class="targetbar">
        <div class="progress" id="progress"></div>
      </div>
      <span class="targetpercentage" id="targetpercent">100%</span>
      <span class="targetvalue" id="targetvalue">1.050m</span>
    </div>
    <div class="deliveries-thismonth block"></div>
    <div class="invoicing-thismonth block"></div>
    <div class="credits-thismonth block"></div>
  </div>
</div>

CSS

body {
  background: #2F1D33;
  color: #EAE7EA;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.container {
  max-width: 600px;
  margin: auto;
  width: 100vw;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
}

.block {
  background: #422E49;
  padding: 15px 20px;
}

.sales-thismonth {
  grid-area: 1 / 1 / 3 / 7;
}

.deliveries-thismonth {
  grid-area: 3 / 1 / 4 / 3;
}

.invoicing-thismonth {
  grid-area: 3 / 3 / 4 / 5;
}

.credits-thismonth {
  grid-area: 3 / 5 / 4 / 7;
}

.title {
  font-size: 20px;
}

.large-value {
  font-size: 85px;
  text-align: center;
}

.targetbar {
  width: 95%;
  height: 3vh;
  margin: auto;
  margin-top: 6vh;
  background: #64546A;
}