Reusable component library sources

                  
<section class="histogram">
  <div class="histogram__headers">
    <div class="histogram__total">
      <span class="histogram__total-name">Total orders</span>
      <span class="histogram__total-number">50254</span>
    </div>
    <div class="histogram__view">
      <span class="histogram__view-name">View all</span>
    </div>
  </div>
  <div class="histogram__charts">
    <div class="histogram__chart" style="height:100%"></div>
    <div class="histogram__chart" style="height:70%"></div> 
    <div class="histogram__chart" style="height:44%"></div>
    <div class="histogram__chart" style="height:78%"></div>
    <div class="histogram__chart" style="height:44%"></div>

    <div class="histogram__chart" style="height:60%"></div>
    <div class="histogram__chart" style="height:78%"></div>
    <div class="histogram__chart" style="height:100%"></div>
    <div class="histogram__chart" style="height:22%"></div>
    <div class="histogram__chart" style="height:44%"></div> 

    <div class="histogram__chart" style="height:60%"></div>
    <div class="histogram__chart" style="height:70%"></div>
    <div class="histogram__chart" style="height:22%"></div>
    <div class="histogram__chart" style="height:100%"></div>
    <div class="histogram__chart" style="height:22%"></div>

    <div class="histogram__chart" style="height:78%"></div>
    <div class="histogram__chart" style="height:60%"></div>
    <div class="histogram__chart" style="height:44%"></div>
    <div class="histogram__chart" style="height:70%"></div>
    <div class="histogram__chart" style="height:60%"></div>

    <div class="histogram__chart" style="height:22%"></div>
    <div class="histogram__chart" style="height:78%"></div>
    <div class="histogram__chart" style="height:70%"></div>
    <div class="histogram__chart" style="height:90%"></div>
    <div class="histogram__chart" style="height:60%"></div>

    <div class="histogram__chart" style="height:22%"></div>
    <div class="histogram__chart" style="height:60%"></div>
    <div class="histogram__chart" style="height:22%"></div>
    <div class="histogram__chart" style="height:70%"></div>
    <div class="histogram__chart" style="height:34%"></div>
  </div>
</section>
                  
                

                  
.histogram {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 300px;
  width: 100%;
  padding: 16px 24px 24px 24px;
  
  background: var(--white);
  border: 1px solid var(--grey-3);
  border-radius: 8px;
}

.histogram__headers {
  display: flex;
  justify-content: space-between;
}

.histogram__total, .histogram__view {
  display: flex;
  flex-direction: column;
}

.histogram__total, 
.histogram__view, 
.histogram__total-name,
.histogram__total-number,
.histogram__view-name {
  font-family: var(--ff-secondary);
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;

  color: var(--black);
}

.histogram__total-number
{
  font-size: 20px;
  line-height: 26px;
  padding-top: 8px;
}

.histogram__charts {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  
  width: 100%;
  height: 50px;
}

.histogram__chart {
  min-width: 8px;
  flex-grow: 1;
  background: var(--primary);
}

.histogram__view-name {
  color: var(--primary);
}