JSFiddle - React, Tailwind, and code Playground

by matmuchrapna

HTML

<div class="simple">
    Simple gradient on the element.
</div>
<div class="ms-simple">
    Simple -ms-gradient on the element.
</div>
<div class="background">
    Simple background on the pseudo-element.
</div>
<div class="background">
    Simple background on the pseudo-element.
</div>
<div class="gradient">
    Simple gradinent on the pseudo-element not working.
</div>
<div class="ms-gradient">
    Simple -ms-gradient on the pseudo-element not working.
</div>

CSS

div {
    height: 35px;
    line-height: 35px;
    width: 46%;
    float: left;
    margin: 10px 2%;
    
    
    text-align: center;
    background: blue;
    color: white;
    z-index: 1;
    position: relative;
}

.gradient:before,
.ms-gradient:before,
.background:before {
    content: '';
    display: block;
    
    position: absolute;
    top: 0;
    height: 100%;
    left: 0;
    width: 100%;


    z-index: 200;
}

.simple {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e539', endColorstr='#ff0004',GradientType=0 );
}

.ms-simple {
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e539', endColorstr='#ff0004',GradientType=0 )";
}

.background:before {
    background: red;
}

.gradient:before {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e539', endColorstr='#ff0004',GradientType=1 );
}

.ms-gradient:before {
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e539', endColorstr='#ff0004',GradientType=1 )";
}