JSFiddle - React, Tailwind, and code Playground

by hutber

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <meta http-equiv="x-ua-compatible" content="IE=8">
    </head>
    
    <body>
        <p>this is a test.</p>
        <button onclick="DisplayInfo();">Click me!</button>
        <div class="browseMenu clearfix">
            <!-- Bof Section 0-->
            <div class="group head0">
                <div class="head">IT Services &amp; Access</div>
                <!-- Bof Level One-->
                <ul class="levelOne">
                    <li><a href="#">Basic IT Access <span>&#9658;</span></a>

                        <!-- Bof Internal
                        Menu-->
                        <div class="internalMenu">
                            <div class="header">
                                 <h2>My Team</h2> &gt; HR for HR
                                <div class="close">X</div>
                            </div>
                            <!-- Bof Level Twos-->
                            <ul class="levelTwo">
                                <li><a href="#">Corporate Finance Systems <span>&#9660;</span></a>

                                    <!-- Bof
                                    levelThree-->
                                    <div class="levelThree">
                                        <div class="header">
                                             <h2>His Team</h2> &gt; HR for HR &gt; HR for HR
                                            <div class="close">X</div>
                                        </div>
                                        <!-- Bof Level Fours-->
                                        <ul class="levelFour">
                                            <li><a href="#">Blah asdimeaw <span>&#9660;</span></a>

                                                <!-- Bof Level Five-->
                                                <ul class="levelFive">
                                                    <li><span>Information</span>

                                  ...

JavaScript

/*
  	 * Author: Rob Reid
  	 * CreateDate: 20-Mar-09
  	 * Description: Little helper function to return details about IE 8 and its various compatibility settings either use as it is
  	 * or incorporate into a browser object. Remember browser sniffing is not the best way to detect user-settings as spoofing is
  	 * very common so use with caution.
  	 */
  	function IEVersion() {
  	    var _n = navigator,
  	        _w = window,
  	        _d = document;
  	    var version = "NA";
  	    var na = _n.userAgent;
  	    var ieDocMode = "NA";
  	    var ie8BrowserMode = "NA";
  	    // Look for msie and make sure its not opera in disguise
  	    if (/msie/i.test(na) && (!_w.opera)) {
  	        // also check for spoofers by checking known IE objects
  	        if (_w.attachEvent && _w.ActiveXObject) {
  	            // Get version displayed in UA although if its IE 8 running in 7 or compat mode it will appear as 7
  	            version = (na.match(/.+ie\s([\d.]+)/i) || [])[1];
  	            // Its IE 8 pretending to be IE 7 or in compat mode              
  	            if (parseInt(version) == 7) {
  	                // documentMode is only supported in IE 8 so we know if its here its really IE 8
  	                if (_d.documentMode) {
  	                    version = 8; //reset? change if you need to
  	                    // IE in Compat mode will mention Trident in the useragent
  	                    if (/trident\/\d/i.test(na)) {
  	                        ie8BrowserMode = "Compat Mode";
  	                        // if it doesn't then its running in IE 7 mode
  	                    } else {
  	                        ie8BrowserMode = "IE 7 Mode";
  	                    }
  	                }
  	            } else if (parseInt(version) == 8) {
  	                // IE 8 will always have documentMode available
  	                if (_d.documentMode) {
  	                    ie8BrowserMode = "IE 8 Mode";
  	                }
  	            }
  	           ...