JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<!-- <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="UTF-8"%> -->
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>GO TEXAN Product Search</title>
    <meta name="author" content="name">
    <meta name="description" content="description here">
    <meta name="keywords" content="keywords,here">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.0/mini-default.min.css" integrity="sha256-Xton3LLGd+c1z73HuypOMubOW3Gp9HhmnfILciq6Zi0=" crossorigin="anonymous" />
    <!-- <script src="js/app.js" type="text/javascript"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.7.3/feather.min.js" integrity="sha256-km9ViEDg2jYMRIV3IgvhZkrGIXt7e+T0zYez9FC064c=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/outdated-browser/1.1.5/outdatedbrowser.min.js" integrity="sha256-yV0saZESxHBqfSfNncH044y3GHbsxLZJbQQmuxrXv90=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/outdated-browser/1.1.5/outdatedbrowser.min.css" integrity="sha256-KNfTksp/+PcmJJ0owdo8yBLi/SVMQrH/PNPm25nR/pI=" crossorigin="anonymous" />
  </head>

  <body>

    <div id="outdated">
      <h6>Your browser is out-of-date!</h6>
      <p>
        Update your browser to view this website correctly.
        <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">
          Update my browser now
        </a>
      </p>
    </div>

    <div id="app">
      <header class="sticky">
        <a href="#" class="logo">GO TEXAN Product Search</a>
      </header>

      <form>
        <div class="row responsive-label">
          <div class="col-sm-12 col-md-3 col-md-offset-2">
            <label>Search Type</label>
          </div>
          <div class="col-sm-12 col-md-3">
            <input type="radio" id="searchByKeyword"...

CSS

.button-group.sm-horizontal {
  flex-direction: row;
}

#outdated {
  display: none;
}

/* Hide the app in IE, as the ourdated message is displayed and the app is unusable */
@media all and (-ms-high-contrast: none) {
  #app {
    display: none;
  }
}

JavaScript

// Plain Javascript
//event listener: DOM ready
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}


// We don't support IE, but we do support Edge
// https://github.com/burocratik/outdated-browser/issues/198#issuecomment-395771300
var supportsPromise = typeof Promise !== "undefined" && Object.prototype.toString.call(Promise.resolve()) === '[object Promise]';

//call plugin function after DOM ready
addLoadEvent(function() {
  if (false === supportsPromise) {
    outdatedBrowser({
      bgColor: '#f25648',
      color: '#ffffff',
      lowerThan: true
    })
  }
});

// TODO: Replace the .current-year with the current year

addLoadEvent(function() {
  feather.replace();
});