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.
    <button>do it</button>
</div>

<div class="layer dark">
    I am a dark layer. lorem
    <button>just do it</button>
</div>

SCSS

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

    &.dark {
        color: #FFF;
        background-color: #666;
        h2 {
            color: #FFF;
            font-weight: 100;
            text-transform: none;
        }
    }   
}

.layer {
    @include layer;
}

@mixin cta() {
    border: 2px solid white;
    border-radius: 1em;
    padding: .5em 1em;
    background: blue;
    color: white;
    font-weight: bold;
    
    .layer.dark & {
        color: blue;
        background: white;
        border-color: blue;
    }
}

button {
    @include cta;
}