JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="container flex-row@md">
  <div class="card">
    <div class="card__icon"><img src="https://placeholder.pics/svg/80x80/DEDEDE/000000/%F0%9F%93%B0" alt=""></div>
    <div class="card__content">
      <h3 class="card__title">Lorem ipsum.</h3>
      <div class="card__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, ab.</div>
    </div>
  </div>
  <div class="card">
    <div class="card__icon"><img src="https://placeholder.pics/svg/80x80/DEDEDE/000000/%F0%9F%93%B0" alt=""></div>
    <div class="card__content">
      <h3 class="card__title">Laudantium, accusantium.</h3>
      <div class="card__description">Quia perferendis laboriosam optio hic adipisci, commodi quae illum iure!</div>
    </div>
  </div>
  <div class="card">
    <div class="card__icon"><img src="https://placeholder.pics/svg/80x80/DEDEDE/000000/%F0%9F%93%B0" alt=""></div>
    <div class="card__content">
      <h3 class="card__title">Quos, velit!</h3>
      <div class="card__description">Quam architecto corporis, et quae modi quisquam blanditiis qui libero.</div>
    </div>
  </div>
</div>

SCSS

.card {
  margin: 2rem 1rem;
  box-shadow: 0 0 1rem #0006;
  
  &__icon,
  &__content {
    text-align: center;
    padding: 1rem;
  }
  
  &__title {
    font-size: 1.5rem;
    margin-top: 0;
  }
}
















.container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 1rem;
}

.flex-row\@md {
  @media (min-width: 480px) {
    display: flex; 
  }
}