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: -webkit-linear-gradient(left, blue, white, blue);
    background-image: -moz-linear-gradient(left, blue, white, blue);
    background-image: -o-linear-gradient(left, blue, white, blue);
    background-image: -ms-linear-gradient(left, blue, white, blue);
    background-image: linear-gradient(left, blue, white, blue);

}

.gradient-2 {
    background-image: -webkit-linear-gradient(left, blue, white 75%, blue);
    background-image: -moz-linear-gradient(left, blue, white 75%, blue);
    background-image: -o-linear-gradient(left, blue, white 75%, blue);
    background-image: -ms-linear-gradient(left, blue, white 75%, blue);
    background-image: linear-gradient(left, blue, white 75%, blue);
}

.gradient-3 {
    background-image: -webkit-linear-gradient(bottom, blue, white 20px, blue);
    background-image: -moz-linear-gradient(bottom, blue, white 20px, blue);
    background-image: -o-linear-gradient(bottom, blue, white 20px, blue);
    background-image: -ms-linear-gradient(bottom, blue, white 20px, blue);
    background-image: linear-gradient(bottom, blue, white 20px, blue);
}

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