JSFiddle - React, Tailwind, and code Playground

by sperske

HTML

<div class="container">
  <div class="sessions_improved">
    <div class='title'>
      <h4>Writing sessions improved</h4>
      <h5>
        <span class="distant far">mar 5</span>
        <span class="distant near">mar 25</span>
        <span>Apr 1</span>
        - Apr 7</h5>
    </div>
    <div class="chart">
      <div class="label">12.97K</div>
      <div class="graph">
        <span class="distant far"><span style="height: 70%">&nbsp;</span></span>
        <span class="distant far"><span style="height: 0%">&nbsp;</span></span>
        <span class="distant far"><span style="height: 30%">&nbsp;</span></span>
        <span class="distant far"><span style="height: 0%">&nbsp;</span></span>
        <span class="distant far"><span style="height: 70%">&nbsp;</span></span>
        <span class="distant far"><span style="height: 75%">&nbsp;</span></span>
        <span class="distant far"><span style="height: 100%">&nbsp;</span></span>
        <span class="distant far"><span style="height: 100%">&nbsp;</span></span>
        <span class="distant far"><span style="height: 20%">&nbsp;</span></span>
        <span class="distant far"><span style="height: 5%">&nbsp;</span></span>
        <span class="distant far"><span style="height: 30%">&nbsp;</span></span>
        <span class="distant far"><span style="height: 70%">&nbsp;</span></span>
        <span class="distant far"><span style="height: 0%">&nbsp;</span></span>
        <span class="distant far"><span style="height: 30%">&nbsp;</span></span>
        <span class="distant far"><span style="height: 0%">&nbsp;</span></span>
        <span class="distant far"><span style="height: 70%">&nbsp;</span></span>
        <span class="distant near"><span style="height: 75%">&nbsp;</span></span>
        <span class="distant near"><span style="height: 100%">&nbsp;</span></span>
        <span class="distant near"><span style="height: 100%">&nbsp;</span></span>
        <span class="distant near"><span style="height:...

CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400;700&display=swap');

@media (min-width: 800px) {
  .container {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    grid-template-rows: 1fr 2fr;
    gap: 24px 16px;
    grid-auto-flow: row;
    grid-template-areas:
      "sessions_improved sessions_improved feedback"
      "numbers top_actions feedback";
  }
}

@media (max-width: 799px) {
  .container {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}
@media (min-width: 501px) {
  .title>h5>span.distant.far {
  display: inline;
}
}
@media (max-width: 500px) {
  .chart .graph>span.distant.far {
    display: none;
  }
  .title>h5>span.distant.near {
  display: inline;
}
}

@media (max-width: 320px) {

  .chart .graph>span.distant.far,
  .chart .graph>span.distant.near {
    display: none;
  }
  .title>h5>span.distant {
    display: none !important;
  }
  .title>h5>span {
    display: inline !important;
  }
}

.container>div {

  font-family: 'Inter', sans-serif;
  border: 1px solid #E7E9F5;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 24px;
  border-radius: 8px;
}

.title {
  display: grid;
  grid-template-columns: auto fit-content(100%);
  align-content: top;
}

.title>h5 {
  white-space: nowrap;
}

.title>h5>span {
  display: none;
}

h4 {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0em;
  font-feature-settings: 'ss01'on;
  /* neutral / 90 */
  color: #0E101A;
  margin: 0 4px;
}

h5 {
  font-size: 10px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.feedback {
  grid-area: feedback;
}

.numbers {
  grid-area: numbers;
}

.top_actions {
  grid-area: top_actions;
}

.sessions_improved {
  grid-area: sessions_improved;
}

.chart {
  display: grid;
  grid-template-columns: auto fit-content(100%);
}

.chart .label {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 700;
 ...