JSFiddle - React, Tailwind, and code Playground

by davidxmartins

HTML

<div class="basic-container basic-container__columns">

    <div class="basic-column">

        <h3 class="slide-up delay-02s">Projecto</h3>
        <p class="slide-up delay-04s">Oferecemos <br>planeamento <br>Estabilidade</p>
    </div>

    <div class="basic-column">
        <h3 class="slide-up delay-02s">Construção</h3>
        <p class="slide-up delay-04s">Executamos <br>acabamentos<br>concretizado</p>
    </div>

    <div class="basic-column">
        <h3 class="slide-up delay-02s">Reabilitação</h3>
        <p class="slide-up delay-04s">Revitalizamos<br>edifícios<br>adaptabilidade</p>
    </div>

  </div>

CSS

.basic-container {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
  height: auto;
}

/* ------ */

.basic-container__columns {
  display: flex;
  row-gap: 30px;
  column-gap: clamp( 20px, 10vh, 120px);
  padding-top: 30px;
}

.basic-column {
  flex: 1;
}

@media (max-width: 1000px) {
  .basic-container__columns {
      flex-direction: column;
  }
}