JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="layer">
    I am a base layer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi praesentium explicabo minima voluptas maxime optio, hic illum est.
</div>

<div class="layer dark">
    I am a dark layer. lorem
</div>

SCSS

@mixin layer() {
    color: #636363;
    padding-bottom: 24px;
    padding-top: 24px;
    p {
        margin-bottom: 1.5em;
    }
}

@mixin dark-layer() {
    @include layer;
    color: #FFF;
    background-color: #666;
    h2 {
        color: #FFF;
        font-weight: 100;
        text-transform: none;
    }
}

.layer {
    @include layer;
}

.layer.dark {
    @include dark-layer;
}