JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

SCSS

div {
    width: 30vmin;
    height: 30vmin;
    border: 1px solid black;
    display: inline-block;
}

$blue: #00f;

.first {
    background: linear-gradient(to bottom, $blue 0%, transparent 100%);
}

.second {
    background: linear-gradient(to bottom, $blue 0%, rgba(255,255,255,0) 100%);
}

.third {
    background: linear-gradient(to bottom, $blue 0%, rgba($blue, 0) 100%);
}