JSFiddle - React, Tailwind, and code Playground

by sthag

HTML

<div id="conteiner">
  <div id="firstRow">
    <div><span>##</span><span class="meta">Menge aller Gerichte</span></div>
    <div>Gericht 1 ##</div>
    <div>Gericht 2 #</div>
  </div>
</div>

SCSS

#firstRow {
  display: flex;
  flex-direction: column;
  
  div:first-child {
    background-color: crimson;
    font-weight: bold;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 128px;
    width: 128px;
    
    .meta {
      position: absolute;
      right: 0;
      bottom: 0;
      font-size: small;
    }
  }
}