JSFiddle - React, Tailwind, and code Playground

by tjnicolaides

HTML

<div class="gbta-sample-ad gbta-sample-ad--desktop">
  <img src="http://placehold.it/728x90" alt="Desktop Ad">
</div>

<div class="gbta-sample-ad gbta-sample-ad--tablet">
  <img src="http://placehold.it/460x90" alt="Tablet Ad">
</div>

<div class="gbta-sample-ad gbta-sample-ad--mobile">
  <img src="http://placehold.it/300x90" alt="Mobile Ad">
</div>

SCSS

$breakpoint-tablet: 768px;
$breakpoint-mobile: 480px;
.gbta-sample-ad {
  display: none;
  text-align: center;
}

.gbta-sample-ad--desktop {
  @media (min-width: $breakpoint-tablet) {
    display: block;
  }
}

.gbta-sample-ad--tablet {
  @media (min-width: $breakpoint-mobile) and (max-width: $breakpoint-tablet) {
    display: block;
  }
}

.gbta-sample-ad--mobile {
  @media (max-width: $breakpoint-mobile) {
    display: block;
  }
}