JSFiddle - React, Tailwind, and code Playground

by Kyle Vassella

HTML

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
	<div>
		Hello World.
	</div>

  <!-- Trigger the modal with a button -->
  <!-- <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> -->

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog" style="position:relative;top:250px;">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Browser Detection</h4>
        </div>
        <div class="modal-body">
          <p id="modal-text-browser"></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>

	<!-- old version of jQuery required to be compatible with Internet Explorer 6-8, Opera 12.1x and Safari 5.1+ -->
	<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
<!-- 	<script
  src="https://code.jquery.com/jquery-1.5.2.min.js"
 ...

JavaScript

//Sources: https://stackoverflow.com/a/26358856/6647188, 

    function testBrowser() { 
	     if(navigator.userAgent.indexOf("Opera") != -1 || navigator.userAgent.indexOf('OPR') != -1 ) {
	        //if Opera
	        function testOpera() {
	        	var Opera = (navigator.userAgent.match(/Opera|OPR\//) ? true : false);
	        	if (Opera) {
	        		// alert ("The Opera browser is not compatible with some features of our site such as Zoom Video Conferencing. Please consider switching browsers.")
	        		$("#modal-text-browser").text("The Opera browser is not compatible with some features of our site such as Zoom Video Conferencing. Please consider switching browsers.");
	        		$("#myModal").modal("show");
	        	}
	        }
	        testOpera();
	    }
	    else if(navigator.userAgent.indexOf("Chrome") != -1 ) {
	        //if Chrome 49 or below
	        function testChrome() {
	        	var match = window.navigator.userAgent.match(/Chrome\/([0-9]+)\./);
	        	var ver = match ? parseInt(match[1]) : 0;
	        	// var is_chrome = userAgent.indexOf('chrome') > -1 && userAgent.indexOf('Safari/') == -1;
	        	if (ver !== 0 && ver < 49) {
	        		// alert("You have Chrome version " + ver + ". Please consider updating Chrome to the latest version for best site functionality.");
	        		$("#modal-text-browser").text("You have Chrome version " + ver + ". Please consider updating Chrome to the latest version for best site functionality.");
	        		$("#myModal").modal("show");
	        	} else {
	        		$("#modal-text-browser").text("Congratulations, you have Chrome version " + ver + ". This is compatible with all of our site features.");
	        		$("#myModal").modal("show");
	        	}
	        }
	        testChrome();
	    }
	    else if(navigator.userAgent.indexOf("Safari") != -1) {
	        //if Safari 9 or below
	        function testSafari(){
	        	var objappVersion = navigator.appVersion;
	        	var objAgent =...