JSFiddle - React, Tailwind, and code Playground

by Ufuk Ozdemir

HTML

<div id="ie-explorer">
    <a href="http://www.windows.microsoft.com/tr-tr/internet-explorer/download-ie" target="_blank">
        <img src="http://res1.windows.microsoft.com/resbox/en/internet%20explorer/2012-win8ga/1125b14f-653f-405e-96fb-a77ab0c8a856_8.png" alt="" />
        Your browser is out of date. <br /> Please upgrade to explorer browser to the latest version.
    </a>
</div>

CSS

#ie-explorer{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(22,160,133,1);
    z-index: 99999 !important;
}
#ie-explorer img{
    margin: 0 auto;
    height: 5em;
    width: auto;
    display: block;
}
#ie-explorer a{
    letter-spacing: 1px;
    line-height: 1.2em;
    font-size: 1.1em;
    font-weight: 400;
    font-family: "Inconsolata";
    text-decoration: none;
    text-align: center;
    color: #fff;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
}

JavaScript

WebFontConfig = {
    google: { families: ['Inconsolata:400:latin,latin-ext'] }
};
(function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
})();