JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Chrome, Firefox OS and Opera -->
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="/favicon-32x32.png?v=476mA4zprB"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="/favicon-16x16.png?v=476mA4zprB"
    />
    <link rel="shortcut icon" href="/favicon.ico?v=476mA4zprB" />
    <!-- Tab Color iOS Safari -->
    <meta name="apple-mobile-web-app-title" content="Metrici.ro" />
    <meta name="application-name" content="Metrici.ro" />
    <!-- Tab Color Android Chrome -->
    <meta name="theme-color" content="#e11422" />

    <link rel="stylesheet" type="text/css" href="style.css" />
    <script
      type="text/javascript"
      src="https://code.jquery.com/jquery-1.12.4.min.js"
    ></script>
    <script src="scripts.js" defer></script>
    <title>Display Settings</title>
  </head>

  <body>
    <div class="nav">
      <ul>
        <a href="/display"><li class="active">Display Settings</li></a>
        <a href="/network"><li>Network Settings</li></a>
        <a href="/user"><li>Create/Change User</li></a>
      </ul>
    </div>
    <div id="page">
      <div class="upper-page">
        <span class="wrapper-title">Display Settings</span>
        <div class="wrapper">
          <div class="current-settings">
            <span class="title">Current Settings</span>
            <div class="settings">
              <span>Brightness: %ph_brightness% (&#37;)</span>
              <span>Idle Messsage: %ph_message%</span>
              <span>Timer 1 (%ph_GPIO_1%): %ph_timer_1%</span>
              <span>Timer 2 (%ph_GPIO_2%): %ph_timer_2%</span>
              <span>Timer 3 (%ph_GPIO_3%): %ph_timer_3%</span>
            </div>
          </div>
          <div class="change-settings">
            <span class="title">Change Settings</span>
            <span...

CSS

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html {
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: sans-serif;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  background-color: #28282f;
}

/* Chrome, Firefox, Opera, Safari 10.1+ */
::placeholder {
  color: #cfcfd5;
  opacity: 1; /* Firefox */
}

/* Internet Explorer 10-11 */
:-ms-input-placeholder {
  color: #cfcfd5;
}

/* Microsoft Edge */
::-ms-input-placeholder {
  color: #cfcfd5;
}

[list]::-webkit-calendar-picker-indicator {
  display: none;
}

a,
a:hover,
a:focus,
a:visited {
  color: #fff;
  text-decoration: none;
}

.nav {
  /* position: fixed; */
  width: 250px;
  height: 100%;
  min-height: 100%;
}

.nav ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 40% 0;
  height: 100%;
  color: #fff;
  background-color: #40404a;
}

.nav ul li {
  width: 100%;
  background-color: #646474;
  padding: 15px;
  border: 1px solid #28282f;
}

.nav ul li:hover {
  background-color: #898999;
  cursor: pointer;
}

.nav ul .active {
  background-color: #898999;
}

#page {
  position: relative;
  width: 100%;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

span {
  display: inline-block;
}

.upper-page,
.middle-page,
.lower-page {
  position: relative;
  margin: 0 auto;
  width: 90%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #40404a;
  padding-bottom: 10px;
}

.lower-page {
  margin-top: 20px;
}

.title,
.info {
  background-color: #4c4c58;
}
.current-settings,
.change-settings,
.logs {
  background-color: #646474;
}

.title,
.wrapper-title {
  font-size: 20px;
  font-weight: bold;
  width: 100%;
  max-width: 1000px;
  padding: 10px;
  text-align:...