JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="container">
  <section>
    <h1>Card1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ab quas architecto deleniti asperiores odio, delectus nemo quidem magni magnam.</p>
    <div class="img"></div>
  </section>
  <section>
    <h1>Card2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, iste!</p>
    <div class="img"></div>
  </section>
  <section>
    <h1>Card3</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    <div class="img"></div>
  </section>
</div>

SCSS

.container {
  display: grid; 
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    background: #EEEEEE;
    .img {
      height: 60px;
      background: pink;
    }
  }
}