JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script src="http://89.200.143.163/~team13/ts/resources/js/datatables.js"></script>
<!-- NAVBAR -->
<div id="navbar">
    <div id="login_details">Computer Science | <a href="login.htm">Log out</a> 
    </div>
    <ol>
        <li id="home_nav">Home</li>
        <li id="request_nav">Request</li>
        <li id="search_nav">Ad Hoc</li>
    </ol>
</div>
<div class="heading_bg">
    <!-- SETTINGS -->
    <div id="settings">
        <button class="resetFont clean-gray">Reset Font Size</button>
        <button class="increaseFont clean-gray">Increase Font Size</button>
        <button class="decreaseFont clean-gray">Decrease Font Size</button>
        <button class="clean-gray">Invert Colours</button>
    </div>
    <!-- HEADING -->
    <div class="heading"> <span>Home</span> 
    </div>
</div>
<div class="page">The following requests require your attention:
    <table id="home_tbl">
        <thead>
            <tr>
                <th>Module Code</th>
                <th>Day</th>
                <th>Start Period</th>
                <th>Length</th>
                <th>Room Preference</th>
                <th>Room Allocation</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <!-- DATA STARTS HERE -->
            <tr class="booking">
                <td>COA101</td>
                <td>Tuesday</td>
                <td>11:00</td>
                <td>2 hours</td>
                <td>B.1.11</td>
                <td class="status">Pending</td>
                <td>
                    <button class="editall cupid-green">Edit</button>
                    <button class="declineall cupid-green">Decline</button>
                    <button class="cancelall cupid-green">Cancel</button>
                </td>
           ...

CSS

/*=======

FONTS

=======*/
 @font-face {
    font-family:'Segoe UI';
    src: url('../fonts/segoe-ui.eot?') format('eot'), url('../fonts/segoe-ui.woff') format('woff'), url('../fonts/segoe-ui.otf') format('otf'), url('../fonts/segoe-ui.ttf') format('truetype');
}
/*=======

DIALOG

=======*/
 .ui-dialog-title, .ui-button-text, .modal {
    font-size: 0.875em;
    font-family:'Segoe UI';
}
/*=======

GENERAL

=======*/
 body {
    margin : 0;
    overflow-y : scroll;
}
/*=======

TOP NAVIGATION BAR

=======*/
 #navbar {
    height : 2.375em;
    width : 100%;
    background-color : rgb(34, 34, 34);
    color : #bbb !important;
    font-family :'Segoe UI', arial, helvetica, sans-serif;
    font-size : 0.813em;
    padding-top : 0.313em;
    padding-left : 1.250em;
    box-sizing : border-box;
    font-weight : bold;
}
#navbar a {
    color : #bbb;
    text-decoration : none;
}
#navbar a:hover {
    color : #fff;
}
#navbar ol {
    display : block;
    list-style : none;
    margin : 0;
    padding : 0;
}
#navbar li {
    position : relative;
    display : inline-block;
    line-height : 1.688em;
    padding : 0;
    vertical-align : top;
    margin-right : 0.625em;
}
#navbar li:hover {
    color : #FFF;
    cursor : pointer;
}
#login_details {
    float : right;
    display : inline-block;
    line-height : 1.688em;
    padding-right : 1.250em;
}
/*=======

SETTINGS - RESET/INCREASE/DECREASE FONT SIZE/INVERT COLOURS

=======*/
 #settings {
    float : right;
    padding-right : 1.250em;
    padding-top : 0.750em;
}
/*=======

PAGE HEADING

=======*/
 .heading {
    padding-left : 1.250em;
    padding-top : 0.625em;
    padding-bottom : 0.938em;
}
.heading span {
    font-family :'Segoe UI', arial, helvetica, sans-serif;
    font-size : 1.500em;
}
.heading_bg {
    border-bottom : 1px solid #666;
    border-color : #e5e5e5;
    height : 3.125em;
    margin-bottom : 1.250em;
    background-color: #f1f1f1;
}
/*=======

PAGE BODY

=======*/
 .page {
    padding-left :...

JavaScript

var defaultFontSize = $('html').css('font-size');

$(".resetFont").click(function () {
    $('html').css('font-size', defaultFontSize);
});

$(".increaseFont").click(function () {
    var fontSize = getFontSize();
    var newFontSize = fontSize + 1;
    setFontSize(newFontSize);
    return false;
});

$(".decreaseFont").click(function () {
    var fontSize = getFontSize();
    var newFontSize = fontSize - 1;
    setFontSize(newFontSize);
    return false;
});

function getFontSize() {
    var currentSize = $("html").css("font-size");
    var currentSizeNumber = parseFloat(currentSize, 12);
    if (currentSizeNumber > 24) {
        currentSizeNumber = 24;
    }
    if (currentSizeNumber < 10) {
        currentSizeNumber = 10;
    }
    return currentSizeNumber;
}

function setFontSize(size) {
    $("html").css("font-size", size);
    $(".actualSize").html(size);
}