JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-lg-4 col-md-6 cardHolder">...</div>
<div class="col-lg-4 col-md-6 cardHolder">...</div>
<div class="col-lg-4 col-md-6 cardHolder">...</div>
<div class="col-lg-4 col-md-6 cardHolder">...</div>
<div class="col-lg-4 col-md-6 cardHolder">...</div>
<div class="col-lg-4 col-md-6 cardHolder">...</div>
</div>

SCSS

BODY {

  &:before {
    position: fixed;
    z-index: 100000;
    bottom: 0;
    right: 0;
    background: $white;
    color: $pink;
    padding: .3rem .5rem;
    font-family: $font-family-monospace;
    font-size: 80%;
    content: 'XS';
    text-transform: lowercase;

    //@include media-breakpoint-up(is) {
    //  content: 'IS';
    //}

    @include media-breakpoint-up(sm) {
      content: 'SM';
    }

    @include media-breakpoint-up(md) {
      content: 'MD';
    }

    @include media-breakpoint-up(lg) {
      content: 'LG';
    }

    @include media-breakpoint-up(xl) {
      content: 'XL';
    }
  }