JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title><?php echo $pagetitle; ?> | Website Name</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
    <body>
        <div id="banner">
            <div id="bannerimgleft"></div>
            <div id="bannerimgright"></div>
            <div id="logo"></div>
        </div>
        <div id="menu">
            <!--button for displaying menu on small screens-->
            <label for="show-menu" class="show-menu">&#x2630;</label>
            <input type="checkbox" id="show-menu" role="button">
            <!--end button-->
            <ul id="menu-sub">
                <li class="cat"><a href="">Option</a></li>
                <li class="cat"><a href="">Option</a>
                    <ul class="sub">
                        <li><a href="">Sub-option</a></li>
                        <li><a href="">Sub-option</a></li>
                        <li><a href="">Sub-option</a></li>
                        <li><a href="">Sub-option</a></li>
                        <li><a href="">Sub-option</a></li>
                        <li><a href="">Sub-option</a></li>
                    </ul>
                </li>
                <li class="cat"><a href="">Option</a>
                    <ul class="sub">
                        <li><a href="">Sub-option</a></li>
                        <li><a href="">Sub-option</a></li>
                        <li><a href="">Sub-option</a></li>
                    </ul>
                </li>
                <li class="cat"><a href="">Option</a></li>
                <li class="cat"><a href="">Option</a>
                    <ul class="sub">
                        <li><a...

CSS

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, img,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video { 
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	font-family: /* "Nunito", */ Verdana, Tahoma, sans-serif;
}

::-moz-selection { background: #bc6672; color: #fff; text-shadow: none; }
::selection { background: #bc6672; color: #fff; text-shadow: none; }

html, body {
    background-color: #BABABA; /* dark grey */
    height: 100%;
}

#banner {
    width: 100%;
    height: 125px;
    background-color: #2d2d2d; /*darkest grey */
    background-image: url(banner.png);
    background-position: center;
    background-repeat: no-repeat;
}
    
    #logo {
        position: relative;
        top: 20px;
        left: 0;
        width: 100%;
        height: 85px;
        background-image: url(logo.png);
        background-position: center;
        background-repeat: no-repeat;
        }
        
    #bannerimgleft {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 125px;
        width: 400px;
        background-image: url(bannerimgleft.png);
    }
    
    #bannerimgright {
        position: absolute;
        top: 0px;
        right: 0px;
        height: 125px;
        width: 400px;
        background-image: url(bannerimgright.png);
    }
    
#menu {
    position: relative;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align:...