JSFiddle - React, Tailwind, and code Playground

by Avdhut Sonpethkar

HTML

<div class="text_display"> Linear Gradient 
    <br />
    <code> background: linear-gradient(to top,red,green,blue);<br />
        background: -webkit-gradient(linear,to top,color-stop(0%,red),color-stop(50%,green),color-stop(100%,blue));<br />
    background: -webkit-linear-gradient(to top,red,green,blue);<br />
    background: -moz-linear-gradient(to top,red,green,blue);<br />
    background: -o-linear-gradient(to top,red,green,blue);<br />
        background: -ms-linear-gradient(to top,red,green,blue);<br />
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FF0000, endColorstr=#00FF00);</code>
</div>
<br />
<div class="linear_grad"> </div>

CSS

.text_display
{
    font-size: 12px;
    font-weight: bold;
    font-family: Georgia, Times New Roman, serif; 
    color: #3d85c6; 
    display:list-item;
    float:left;
    margin:10px;
    width:100%;
    line-height: 15px;
}

.linear_grad
{
    width: 120px;
    height: 120px;
    /*
    Linear gradient example
    with various browser support
    */
    background: linear-gradient(to top,red,green,blue);
    background: -webkit-linear-gradient(to top,red,green,blue);
        background: -webkit-gradient(linear,to top,color-stop(0%,red),color-stop(50%,green),color-stop(100%,blue));
    background: -moz-linear-gradient(to top,red,green,blue);
    background: -o-linear-gradient(to top,red,green,blue);
    background: -ms-linear-gradient(to top,red,green,blue);
 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FF0000, endColorstr=#00FF00);
    margin:10px;
    display:list-item;
    float:left;
  
}