JSFiddle - React, Tailwind, and code Playground

by Bhupesh Kushwaha

HTML

Should overload
<div id="output"></div>
<div id="find-ie" class="find-ie"><p>The website detected Internet Explorer as the browser.For best user experience, please open the site using Mozilla Firefox or Google Chrome</p></div>

CSS

#find-ie {
    top: 45%;
    left: 20%;
    opacity: 0.8;
    color: rgba(193, 20, 20, 1);
    text-align: center;
    position: absolute;
    z-index: 999;
    background: #000;
    display: none;
}

JavaScript

var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
    // At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode;   // At least IE6

var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
//document.body.innerHTML = output;
 document.getElementById("output").innerHTML=output;
if(isFirefox == true)
{
    alert('hi');
    document.getElementById("find-ie").style.display="none";
  //document.getElementById("find-ie").innerHTML="Hello bhupesh!";
}
if(isIE == true)
{
    alert('hi');
    document.getElementById("find-ie").style.display="block";
  //document.getElementById("find-ie").innerHTML="Hello bhupesh!";
}