JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.1/vue.cjs.js"></script>
<div class="pricing_table">
  <div class="pricing_table__header">
    <div class="pricing_table__header_cell">
      Plano
    </div>
    <div class="pricing_table__header_cell">
      Mensagens por mês
    </div>
    <div class="pricing_table__header_cell">
      Preço mensagem
    </div>
    <div class="pricing_table__header_cell">
      Preço
    </div>
  </div>
  <div class="pricing_table__body">
    <div class="pricing_table__body_row">
      <div class="pricing_table__body_cell">
        Básico
      </div>
      <div class="pricing_table__body_cell">
        200
      </div>
      <div class="pricing_table__body_cell">
        .04
      </div>
      <div class="pricing_table__body_cell">
        19
      </div>
      <div class="pricing_table__body_cell">
        <button>Seleccionar Plano</button>
      </div>
    </div>
    <div class="pricing_table__body_row">
      <div class="pricing_table__body_cell">
        Standard
      </div>
      <div class="pricing_table__body_cell">
        200
      </div>
      <div class="pricing_table__body_cell">
        .04
      </div>
      <div class="pricing_table__body_cell">
        19
      </div>
      <div class="pricing_table__body_cell">
        <button>Seleccionar Plano</button>
      </div>
    </div>
    <div class="pricing_table__body_row">
      <div class="pricing_table__body_cell">
        Pro
      </div>
      <div class="pricing_table__body_cell">
        200
      </div>
      <div class="pricing_table__body_cell">
        .04
      </div>
      <div class="pricing_table__body_cell">
        19
      </div>
      <div class="pricing_table__body_cell">
        <button>Seleccionar Plano</button>
      </div>
    </div>
  </div>
</div>

CSS

.pricing_table {
    
}

.pricing_table__header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.pricing_table__header_cell {
}

.pricing_table__body_row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr  1fr;
}

.pricing_table__body_cell {
}