JSFiddle - React, Tailwind, and code Playground

HTML

<!Doctype html>
<html5>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>IBAE-Information Library</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="/Users/jeevabharathi/Documents/Website/IBAE.css">
        <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
    </head>


    <body onload="init()">
        <nav>
            <h1 style="font-family:Helvetica;">
                <ul class="nav">
                    <li><a href="#">Menu 1</a>
                        <ul onload="init1()">
                            <li><a href="#">Sub-menu Item 1</a></li>
                            <li><a href="#">Sub-menu Item 2</a></li>
                            <li><a href="#">Sub-menu Item 3</a></li>
                        </ul>
                    </li>
                    <li><a class="dropdown" href="#">Menu 2</a>
                        <ul onload="init1()">
                            <li><a href="#">Sub-menu Item 1</a></li>
                            <li><a href="#">Sub-menu Item 2</a></li>
                            <li><a href="#">Sub-menu Item 3</a></li>
                        </ul>
                    </li>
                    <li><font size="+4", color="white">IBAE</font> <br></li>
                    <li><a href="#">Menu 3</a>
                        <ul onload="init1()">
                            <li><a href="#">Sub-menu Item 1</a></li>
                            <li><a href="#">Sub-menu Item 2</a></li>
                            <li><a href="#">Sub-menu Item 3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Menu 4</a>
                        <ul onload="init1()">
                            <li><a href="#">Sub-menu Item 1</a></li>
                            <li><a href="#">Sub-menu Item...

CSS

nav h1 
    {
        vertical-align: middle;   
        background-color: rgb(0, 0, 0);
        border: 10px solid rgba(0, 0, 0, 0);
        text-align: center;
        position: fixed;
        position: top;
        min-width: 100%;
        z-index: 3;
    
    }
.nav ul 
{
    vertical-align: middle;
    -webkit-font-smoothing:antialiased;
    text-shadow:0 1px 0 rgba(255, 255, 255, 0);
    background: rgb(0, 0, 0);
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    z-index: 3;
}
.nav li 
{
    vertical-align: middle;
    float: left;
    margin: 0;
    padding: 100; 
    position: relative;
    min-width: 20%;
    z-index: 3;
}
.nav a 
{
    vertical-align: middle;
    background: rgb(0, 0, 0);
    display: block;
    font: bold 15px/50px helvetica;
    padding: 0 0 0 0px;
    text-align: center;
    text-decoration: none !important;
    color: rgb(255, 255, 255);
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
            transition: all .25s ease;
            z-index: 3;
}
.nav .dropdown:after 
{
    content: '';
}
.nav .dropdown:hover:after
{
    content:''
}
.nav li:hover a 
{
    color: white;
    background: rgb(0, 0, 0);
}
.nav li ul 
{
    vertical-align: middle;
    float: left;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 35px;
    visibility: hidden;
    z-index: 4;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
            transition: all .25s ease;
}
.nav li:hover ul 
{
    opacity: 1;
    top: 50px;
    visibility: visible;
}
.nav li ul li 
{
    float: none;
    width: 100%;
}
.nav li ul a:hover 
{
    background: rgb(96, 231, 255);
}

body{
    background: linear-gradient(to right, rgb(39, 38, 38), rgb(255, 255, 255),rgb(39, 38, 38));
}
.cardpop 
{
    transition: all 0.5s;
}
  
.cardpop:hover {
   ...

JavaScript

function init() {
  function setBackgroundForTimeOfDay() {
    const body = document.querySelector('body');
    const hours = new Date().getHours();

    if (9 <= hour && hours <= 12)
      body.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 231, 255),rgb(39, 38, 38))';
      if (hours > 12 && hours <= 15)
      body.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
    else
      body.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
  }
}
  function init1() {
    function setBackgroundForTimeOfDay() {
      const body = document.querySelector('body');
      const hours = new Date().getHours();
  
      if (9 <= hour && hours <= 12)
        ul.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 231, 255),rgb(39, 38, 38))';
        if (hours > 12 && hours <= 15)
        ul.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
      else
        ul.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
    }

  setBackgroundForTimeOfDay();
  setInterval(setBackgroundForTimeOfDay, 60000);
}