JSFiddle - React, Tailwind, and code Playground

HTML

<!--[if lt IE 7]> <div id="body" class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <div id="body" class="no-js lt-ie10 lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <div id="body" class="no-js lt-ie10 lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]>    <div id="body" class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <div id="body" class="no-js" lang="en"> <!--<![endif]-->
<!-- fake body only for jsfiddle and for simulate conditional css for different browsers -->
    <div class="box">
        box with cleartype
        <!--[if lte IE 9]>
            <span class="after">xxxxxx </span>
        <![endif]-->
    </div>
</div>

CSS

.box {
    width: 80%;
    margin: 0 auto;
    height: 50px;
    text-align: center;
    text-transform: uppercase;
    font: bold 10px/5 Arial, Helvetica, sans-serif;
    
   /* gradients for normal browsers */
    background: rgb(255,137,137);
    background: -moz-linear-gradient(top,  rgba(255,137,137,1) 0%, rgba(255,255,136,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,137,137,1)), color-stop(100%,rgba(255,255,136,1)));
    background: -webkit-linear-gradient(top,  rgba(255,137,137,1) 0%,rgba(255,255,136,1) 100%);
    background: -o-linear-gradient(top,  rgba(255,137,137,1) 0%,rgba(255,255,136,1) 100%);
    background: -ms-linear-gradient(top,  rgba(255,137,137,1) 0%,rgba(255,255,136,1) 100%);
    background: linear-gradient(top,  rgba(255,137,137,1) 0%,rgba(255,255,136,1) 100%);
}

.box + .box {
    margin-top: 20px;
}

/* in production i use some kind of ie.css  */
.lt-ie10 .box .after {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8989', endColorstr='#ffff88',GradientType=0 );
}

.lt-ie10 .box {
    z-index: 1;
    position: relative;
}

.lt-ie10 .box .after {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}