JSFiddle - React, Tailwind, and code Playground

by Seng Tat Pan

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<?php
	include 'php/constants.php';		//	Recognises session, put before all html
	include 'php/mysql_settings.php';
	include 'php/utility.php';
	session_start();
	if(isset($_COOKIE["rememberme"])){	//	Checks if user is stored in session or cookie, if any
		$rm = $_COOKIE["rememberme"];
	}elseif(isset($_SESSION["rememberme"])){
		$rm = $_SESSION["rememberme"];
	}
	
	if(isset($rm)){
		try{
			$connection = new PDO("mysql:host=$mysql_host;port=$mysql_port;dbname=$mysql_DB", $mysql_user, $mysql_password);
			$connection-> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
		}
		catch (PDOException $err){
			echo '<div class="errorCanvas"><p id="errorMsg">Could not connect to server. Please try again in a few minutes.</p></div>';
			return 0;
		}
		$statement = $connection->prepare('SELECT RankID FROM Login WHERE Username="'.$rm.'"');
		$statement->execute();
		$current_rankID = $statement->fetchColumn();
?>
<body>
    <div class="page fadeIn">
		<?php 
			if(isset($rm) && $current_rankID != NULL && $current_rankID <= $CONST_RANK_OUTSOURCE)
			{ //	If logged in 
		?>
            <!-- START MAIN BODY (LOGGED IN)-->
            <div class="dashboard">
                <h1 align="center">Plan</h1>
                <table border="0" cellspacing="1" cellpadding="1">
			        <tbody>
			        	<tr>
			        		<td><b>Date Range Filter for Scheduled Date</b></td>
			        	</tr>
			        	<tr>
			            	<td>Scheduled Date (Min):</td>
			            	<td><input type="text" id="date_starting" name="date_starting"></td>
			        	</tr>
				        <tr>
				            <td>Scheduled Date (Max):</td>
				            <td><input type="text" id="date_ending" name="date_ending"></td>
				        </tr>
				        <tr><td>&nbsp;</td></tr>
			    	</tbody>
				</table>
                <!-- If you wish to have the...

CSS

/* SUPER WRAPPER */
div.wrapper {
    min-width: 640px;
}

/* NAVIGATION BAR */
table.navbar {
	position: fixed;
	border-bottom: 1.5px solid #48FC28;
	background: #000000;
	top: 0; 
	left: 0;
	z-index: 2000;
	min-width: 640px;
	width: 1760px;
	width: 100%;
	min-height: 50px;
	height: 85px;
	font-family: "Razer";
} 
td.navbarMainTD{
	float: middle;
	margin: 1px;
	min-width: 200px;
}
table.navbarLogo {
	top: 10px;
	left: 10px;
}
img.navbarLogo {
	width: 68px;
	height: 62px;
}
td.navbarLogo_text {
	text-align: left;
	font-family: "Razer";
	font-size: 0.93em;
	color: #66FF33;
}
table.navbarTable {
	position: relative;
	table-layout: fixed;
	padding: 0.8%;
	top: 2.31%;
	/* left: 28.39%; */
	width: 672px;
	margin-left: 0px;
	/* background-color: #000000; */
	border-collapse: collapse;
	border: 1px solid #66FF33;
	text-align: center;
	font-family: "Razer";
	font-size: 0.93em;
	color: #FFFFFF;
}
td.navbarTD  {
	font-size: 0.8em;
	width: 25%;
}

/* NAVIGATION BAR LOG IN */
form.login {
	/* position: fixed; */
	/* top: 5px; */
	/* left: 5px; */
}
table.navbarLogin {
	position: relative;
	table-layout: fixed;
	min-width: 336px;
	min-height: 80px;
}
table.navbarLoginUsername {
	position: relative; /* fixed */
	table-layout: fixed;
	/* top: 1%;  8px */
	/* left: 70%;  1500px */
	height: 30;
	width: 295;
	background-color: #000000;
	font-family: "Razer";
	font-size: 0.8em;
	color: #FFFFFF;
}
table.navbarLoginPw {
	position: relative; /* fixed */
	table-layout: fixed;
	/* top: 5%; 40px */
	/* left: 70%; 1500px */
	height: 30;
	width: 295;
	background-color: #000000;
	font-family: "Razer";
	font-size: 0.8em;
	color: #FFFFFF;
}
label.rememberme {
	position: relative; /* fixed */
	font-family: "Razer";
	font-size: 0.8em;
	/* left: 89%; 1760px */
	/* top: 1.389%; 15px */
	color: #FFFFFF;
	white-space: nowrap;
}
input.loginButton {
	position: relative; /* fixed */
	/* left: 90.5%; 1795px */
	/* top: 5%; 45px */
	height: 25px;
	width: 68px;
	-moz-box-shadow: inset 0px 1px 0px 0px...

JavaScript

$(document).ready(function(){
            $('#Plan').DataTable();
		} );


/*! jQuery v1.11.1 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */
!function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var c=[],d=c.slice,e=c.concat,f=c.push,g=c.indexOf,h={},i=h.toString,j=h.hasOwnProperty,k={},l="1.11.1",m=function(a,b){return new m.fn.init(a,b)},n=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,o=/^-ms-/,p=/-([\da-z])/gi,q=function(a,b){return b.toUpperCase()};m.fn=m.prototype={jquery:l,constructor:m,selector:"",length:0,toArray:function(){return d.call(this)},get:function(a){return null!=a?0>a?this[a+this.length]:this[a]:d.call(this)},pushStack:function(a){var b=m.merge(this.constructor(),a);return b.prevObject=this,b.context=this.context,b},each:function(a,b){return m.each(this,a,b)},map:function(a){return this.pushStack(m.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(d.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(0>a?b:0);return this.pushStack(c>=0&&b>c?[this[c]]:[])},end:function(){return this.prevObject||this.constructor(null)},push:f,sort:c.sort,splice:c.splice},m.extend=m.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||m.isFunction(g)||(g={}),h===i&&(g=this,h--);i>h;h++)if(null!=(e=arguments[h]))for(d in e)a=g[d],c=e[d],g!==c&&(j&&c&&(m.isPlainObject(c)||(b=m.isArray(c)))?(b?(b=!1,f=a&&m.isArray(a)?a:[]):f=a&&m.isPlainObject(a)?a:{},g[d]=m.extend(j,f,c)):void 0!==c&&(g[d]=c));return g},m.extend({expando:"jQuery"+(l+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new...