JSFiddle - React, Tailwind, and code Playground

by ninachroscicka

HTML

<div class ="cars__header">
  <div class ="card__body">
  <div class="Row">
      <div class="Column" id="main_noun">Rzeczownik</div>
      <div class="Column" id="main_word"></div>
      <div class="Column_main" id="main_adj">Przymiotnik</div>
  </div>
  
    <div class="Row">
      <div class="Column">Rzeczownik</div>
      <div class="Column" id="main_word"></div>
      <div class="Column">Przymiotnik</div>
  </div>
  <div class="Row">
      <div class="Column">Rzeczownik</div>
      <div class="Column" id="main_word"></div>
      <div class="Column">Przymiotnik</div>
  </div>
  <div class="Row">
      <div class="Column">Rzeczownik</div>
      <div class="Column" id="main_word"></div>
      <div class="Column">Przymiotnik</div>
  </div>
  <div class="Row">
      <div class="Column">Rzeczownik</div>
      <div class="Column" id="main_word"></div>
      <div class="Column">Przymiotnik</div>
  </div>
    <div class="Row">
      <div class="Column">Rzeczownik</div>
      <div class="Column" id="main_word">Agata Duda</div>
      <div class="Column">Przymiotnik</div>
  </div>
  <div class="Row">
      <div class="Column">Rzeczownik</div>
      <div class="Column" id="main_word"></div>
      <div class="Column">Przymiotnik</div>
  </div>
  <div class="Row">
      <div class="Column">Rzeczownik</div>
      <div class="Column" id="main_word"></div>
      <div class="Column">Przymiotnik</div>
  </div>
  <div class="Row">
      <div class="Column">Rzeczownik</div>
      <div class="Column" id="main_word"></div>
      <div class="Column">Przymiotnik</div>
  </div>
  <div class="Row">
      <div class="Column">Rzeczownik</div>
      <div class="Column" id="main_word"></div>
      <div class="Column">Przymiotnik</div>
  </div>
  

  
  
  

  </div>
</div>

CSS

.Row{
    display: table;
    width: 100%;
    table-layout: fixed;
    border-spacing: 9px;
}
.Column{
    display: table-cell;
}

#main_word{
  font-size: 25px;
  color: #267b8b;
  font-weight: bold;
}
#main_noun{
  font-size: 20px;
  color: #267b8b;
  font-weight: bold;
  text-decoration: underline;
}
#main_adj{
  font-size: 20px;
  color: #267b8b;
  font-weight: bold;
  text-decoration: underline;
}

.card__body {

    border: 1px solid #eae6e4;
    border-radius: 10px;
    flex: 1;
    padding: 15px;
    min-height: 200px;

}

.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 15px 10px;}