JSFiddle - React, Tailwind, and code Playground

by SmychenkoOleg

HTML

<section class="inschool">
            <div class="container">
            
                <h4 class="inschool__title title">
                    Y dasle if dolorsit.
                </h4>
                
                <div class="inschool__column">
                
                    <div class="column__item">
                        <h5 class="column__title">
                            Loremipsu
                        </h5>
                        <p class="column__text">
                       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum expedita, quibusdam a quod sunt placeat autem quidem voluptatibus veritatis quam illo cum perferendis. Eum fuga, placeat nulla obcaecati debitis praesentium! Ipsa quis fugit sunt, unde provident.
                        </p>
                    </div>

                    <div class="column__item">

                        <h5 class="column__title column__title--plane">
                            DASLE  Y <br> DOLORSIT
                        </h5>

                        <p class="column__text">
                        Đ’Lorem ipsum dolor sit amet, consectetur adipisicing.
                        <br>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto asperiores animi vitae?
                        </p>

                    </div>
                    
                    <div class="column__item">
                        <h5 class="column__title column__title--surf">
                            DOLORSI Y <br> IFDOLORSIT
                        </h5>

                        <p class="column__text">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. In aut, fugit quasi assumenda animi voluptatem ad et rem at vero.
                        </p>
                    </div>
                    
                </div>
            </div>
        </section>

CSS

.container {
  max-width: 1220px;
  width: 100%;
  padding: 0 10px;
  margin: 0 auto;
}

.title {
  font-family: 'Arial', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #01353E;
}

.inschool {
  background-color: #f8f8f8;
}

.inschool__title {
  margin-bottom: 20px;
  text-align: center;
  background-color: #E69EFF;
}

.inschool__column {
  display: flex;
  justify-content: space-between;
  background-color: #E69EF1;
  border: 2px solid red;
}

.column__item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
    background-color: #A65EF1;
    border: 2px solid #00FFFA;
    padding: 0 5px;
    flex: 0 0 350px;


}

.column__title {
  font-size: 24px;
  line-height: 28px;
  text-transform: uppercase;
  justify-content: flex-start;
  margin-bottom: 5px;
  border: 2px solid #000;
  background-color: #E65EF1;
  height: 60px;

}

.column__text {
  font-size: 14px;
  line-height: 18px;
  text-align: left;
  padding: 0 5px;
  background-color: #E6EEF1;
  border: 2px solid #000;
  flex: 1 0 auto;


}