JSFiddle - React, Tailwind, and code Playground

by Rebecca Peck

HTML

<div class="column-xs-1 column-sm-2 column-md-3 column-lg-4">
    Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.

Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
css3 </div>

CSS

@media (max-width: 768px) {
  .column-xs-1 {
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
    padding: 0 15px 0 15px;
    -webkit-columns: auto 1;
    -moz-columns: auto 1;
    columns: auto 1; }

  .column-xs-2 {
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
    padding: 0 15px 0 15px;
    -webkit-columns: auto 2;
    -moz-columns: auto 2;
    columns: auto 2; }

  .column-xs-3 {
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
    padding: 0 15px 0 15px;
    -webkit-columns: auto 3;
    -moz-columns: auto 3;
    columns: auto 3; }

  .column-xs-4 {
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
    padding: 0 15px 0 15px;
    -webkit-columns: auto 4;
    -moz-columns: auto 4;
    columns: auto 4; }

  .column-xs-5 {
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
    padding: 0 15px 0 15px;
    -webkit-columns: auto 5;
    -moz-columns: auto 5;
    columns: auto 5; }

  .column-xs-6 {
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
    padding: 0 15px 0 15px;
    -webkit-columns: auto 6;
    -moz-columns: auto 6;
    columns: auto 6; }

  .column-xs-7 {
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
    padding: 0 15px 0 15px;
    -webkit-columns: auto 7;
    -moz-columns: auto 7;
    columns: auto 7; }

  .column-xs-8 {
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
    padding: 0 15px 0 15px;
    -webkit-columns: auto 8;
    -moz-columns: auto 8;
    columns: auto 8; }

  .column-xs-9 {
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
    padding: 0 15px 0 15px;
    -webkit-columns: auto 9;
    -moz-columns: auto 9;
    columns: auto 9; }

  .column-xs-10 {
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
    padding: 0 15px 0 15px;
   ...