JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="columns -twoUp@md -threeUp@lg">
  <div class="columns__column card">
    <h3 class="card__title">Lorem ipsum.</h3>
    <div class="card__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quos quo autem numquam ex maiores voluptas, tenetur atque rerum illum, laborum enim, doloribus ab nulla inventore alias ratione unde est?</p>
    </div>
  </div>
  <div class="columns__column card">
    <h3 class="card__title">Lorem ipsum.</h3>
    <div class="card__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quos quo autem numquam ex maiores voluptas, tenetur atque rerum illum, laborum enim, doloribus ab nulla inventore alias ratione unde est?</p>
    </div>
  </div>
  <div class="columns__column card">
    <h3 class="card__title">Lorem ipsum.</h3>
    <div class="card__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quos quo autem numquam ex maiores voluptas, tenetur atque rerum illum, laborum enim, doloribus ab nulla inventore alias ratione unde est?</p>
    </div>
  </div>
  <div class="columns__column card">
    <h3 class="card__title">Lorem ipsum.</h3>
    <div class="card__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quos quo autem numquam ex maiores voluptas, tenetur atque rerum illum, laborum enim, doloribus ab nulla inventore alias ratione unde est?</p>
    </div>
  </div>
</div>

SCSS

@mixin with-suffixes($selector) {
  @media screen and (min-width: 480px) {
    #{$selector}\@md {
      @content;
    }
  }
  @media screen and (min-width: 640px) {
    #{$selector}\@lg {
      @content;
    }
  }
}

.columns {
    @include with-suffixes("&.-twoUp") {
        display: flex;
        flex-flow: row wrap;

        .columns__column {
            flex-basis: 50%;
        }
    }
    
    @include with-suffixes("&.-threeUp") {
        display: flex;
        flex-flow: row wrap;

        .columns__column {
            flex-basis: 33.333%;
        }
    }
}