JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<div class="box">
    <h2>Hello World</h2>
</div>

SCSS

$g-mobile: 0;
$g-tablet: 48rem; //768px
$g-desktop: 73.125rem; // 1170px
$primary: #2fc199;
$l-space: 1rem;

@mixin mobile {
    @media screen and (min-width: #{$g-mobile}) {
        @content;
    }
}

@mixin tablet {
    @media screen and (min-width: #{$g-tablet}) {
        @content;
    }
}

@mixin desktop {
    @media screen and (min-width: #{$g-desktop}) {
        @content;
    }
}

body {
  font-family: sans-serif;  
}

.box {
    padding: $l-space;
    transition: all 300ms ease;
    display: flex;
    justify-content: center;
    align-items: center;
    
    @include mobile {
        background: olive;
        height: 40vh;
        color: goldenrodyellow;
        font-size: $l-space;
    }
    
    @include tablet {
        background: navy;
        height: 60vh;
        color: orange;
        font-size: 2rem;
    }
    
    @include desktop {
        background: lighten($primary, 10%);
        height: 90vh;
        color: white;
        font-size: 4rem
    }
}