JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
    <html lang="en">
    <html>
    <head>
    <meta charset="utf-8">
    <title>Miguel Salvador Portfolio</title>
    <script src="projectChanger.js"></script>

    <!--<link href="mystylesheet.css" rel="stylesheet" type="text/css">-->
    <link rel="stylesheet" href="css/meanmenu.css" media="all" >
    <link href="css/portraitphone.css" rel="stylesheet" type="text/css">
    <link href="css/regularscreen.css" rel="stylesheet" type="text/css">
    <link href="css/portraittablet.css" rel="stylesheet" type="text/css">
    </head>
    <body>

    <header class="container">
      
      
        <nav>
          <ul>
            <li><a href="index.html">HOME</a></li>
            <li><a href="2dwork.html">2D WORK</a>
              <ul>
                <li><a href="2danimations.html">2D ANIMATIONS</a></li>
              </ul>
            </li>
            <li><a href="3dwork.html">3D WORK</a>
              <ul>
                <li><a href="3danimations.html">3D ANIMATIONS</a></li>
              </ul>
            </li>
            <li><a href="games.html">GAMES</a>
              <ul>
                <li><a href="inanimate.html">INANIMATE</a></li>
                <li><a href="upariver.html">UPARIVER</a></li>
                <li><a href="hollow.html">HOLLOW</a></li>
              </ul>
            </li>
            <li><a href="blog.html">BLOG</a></li>
            <li><a href="otherprojects.html">OTHER PROJECTS</a>
              <ul>
                <li><a href="soundtrack.html">SOUNDTRACK</a>
                  <ul>
                    <li><a href="s1.html">OST#1</a></li>
                    <li><a href="s2.html">OST#2</a></li>
                    <li><a href="s3.html">OST#3</a></li>
                    <li><a href="s4.html">OST#4</a></li>
                    <li><a href="s5.html">OST#5</a></li>
                    <li><a href="s6.html">OST#6</a></li>
                  </ul>
                </li>
                <li><a href="cosplay.html">COSPLAY</a>
      ...

CSS

@charset "utf-8";
    /* CSS Document */

    @media screen and (min-width:1025px) {

    body {
    background-image: url('http://placehold.it/100x100');
    		
    }

    * {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	list-style-image: url(data:0);
    	list-style-type: none;
    	font-family: 'Verdana';
    }
    a {
    	list-style: none;
    	list-style-image: url(data:0);
    	list-style-type: none;
    }

    header {
    	display: none;
    }
    .MleftHeader {
    	display: none;
    	width: 450px;
    	margin: 0 auto;
    	text-align: center;
    }
    .container {
    	width: 100%;
    	margin: 0 auto;
    	background-color: transparent;
    	z-index: 1;
    	-webkit-transform: translateZ(0);
    }
    .Projectcontainer {
    	width: 100%;
    	margin: 0 auto;
    	background-color: transparent;
    	z-index: 1;
    	-webkit-transform: translateZ(0);
    }

    #menuW {
    	width: 100%;
    	z-index: 3;
    }
    #JobContainer {
    	padding-top:5px;
    	padding-bottom:5px;
    	width: 100%;
    	background-color: #0087ae;
    	height: 50px;
    	list-style-type: none;
    }
    .leftHeader {
    	width: 450px;
    	margin: 0 auto;
    	text-align: center;
    }
    .leftHeader a {
    	color: #FFF;
    }
    .mainDiv {
    	float: left;
    	text-align: center;
    	margin: 0 auto;
    	height: 50px;
    	
    }
    .t1 {
    	width: 200px;
    	
    	font-size: 20px;
    	line-height: 50px;
    }
    .t2 {
    	width: 50px;
    }
    .t3 {
    	width: 180px;
    	font-size: 20px;
    	line-height: 50px;
    }
    #MenuContainer {
    	width: 100%;
    	background-color: #FF9900;
    	height: 40px;
    }
    #menuP {
    	width: 1024px;
    	height: 33px;
    	top: 0;
    	left: 0;
    	list-style: none;
    	list-style-image: none;
    	list-style-type: none;
    	margin: 0 auto;
    }
    #menuP a {
    	text-decoration: none;
    	font: 12px/1;
    	color: #FFF;
    	list-style: none;
    	list-style-image: none;
   ...