JSFiddle - React, Tailwind, and code Playground

by dima_k

HTML

<div class="gradient-1"></div>
<div class="gradient-2"></div>
<div class="gradient-3"></div>

CSS

.gradient-1 {
    background-image: -moz-linear-gradient(left, blue, white, blue);
    background-image: -webkit-gradient(linear, left center, right center, from(blue), color-stop(50%,white), to(blue));
}

.gradient-2 {
    background-image: -moz-linear-gradient(left, blue, white 75%, blue);
    background-image: -webkit-gradient(linear, left center, right center, from(blue), color-stop(75%,white), to(blue));
}

.gradient-3 {
    background-image: -moz-linear-gradient(bottom, blue, white 20px, blue);
    background-image: -webkit-gradient(linear, center bottom, center top, from(blue), color-stop(0.2,white), to(blue));
}

div[class^='gradient'] {
    height: 150px;
    width: 90%;
    margin: 30px auto;
}