JSFiddle - React, Tailwind, and code Playground

by Stephen

HTML

<section class="section">White</section>
<section class="section">White</section>
<div class="color-scheme--violet-red"></div>
<section class="section">Colored</section>
<section class="section">Colored</section>
<div class="color-scheme--clear"></div>
<section class="section">White</section>
<section class="section">White</section>
<div class="color-scheme--violet-red"></div>
<section class="section">Colored</section>
<section class="section">Colored</section>

SCSS

$white: #f0f0fe;
$red: #c54839;
$violet: #6c195e;

.section {
    height: 15em;
    background: $white;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    color: $red;
    border: 1px solid $red;
}

.color-scheme--clear ~ .section {
    background: $white;
    color: $red;
}

.color-scheme--violet-red ~ .section {
    background-image: linear-gradient(to right, darken($violet, 10%) 0%, darken($red, 10%) 100%);
    color: $white;
}