JSFiddle - React, Tailwind, and code Playground

by cupofdirtfordinner

HTML

<html><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tea331 site</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>
    <body>
      <div class="bg" id="bg1"></div>
      <div class="bg" id="bg2"></div>
      
      <div id="main">
        <div id="colLeft">
          <div class="panel" id="logo">
            <h3 id="logoText"> <!--intentionally blank--> </h3>
          </div>
          <div class="panel" id="nav">
              <h3>navigation</h3> <!--deleted navheader cuz what was it for lol-->
              <img src="Home.png">
          </div>
        </div>
        <div id="colRight">
          <div class="panel" id="header">
            <h3>header</h3>
          </div>
          <div class="panel" id="content">
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque imperdiet fringilla maximus. Etiam elementum gravida odio, vitae accumsan dui finibus id. Nam quis egestas massa. In rhoncus ut erat eu cursus. Integer ligula dui, finibus a ante ac, gravida eleifend sem. Vivamus pharetra laoreet accumsan. Sed molestie aliquam tortor. Pellentesque eget finibus urna, quis molestie quam. Integer eu bibendum velit. Nam convallis vehicula lectus quis fringilla. Donec urna ligula, fringilla non placerat vel, fringilla vitae lectus. Nam placerat mauris non quam sodales, ut maximus dui aliquet. Proin posuere magna vitae tellus porttitor, non placerat ipsum lobortis. Phasellus nibh est, maximus id felis eu, porttitor sollicitudin ligula. Integer consectetur pharetra tellus, eget hendrerit metus facilisis malesuada. Sed et nisi ac diam vestibulum aliquam non eu augue.

Vestibulum ac nulla eget ligula volutpat imperdiet in ac lectus. Nunc dapibus libero eget fringilla tempus. In odio arcu, euismod id faucibus a, mollis id quam. Nulla non ultrices magna. Aliquam et justo lectus. Vivamus facilisis egestas sem a lacinia. Nam auctor sem...

CSS

@keyframes grow{
 from{
   width: 20%;
 }
 to{
   width: 130%;
 }
}

*{
  margin: 0;
  margin-top: 0;
}  
html{
    font-family: courier;
}

#logo{
    background-color: #e3dcb1;
}
#navHome:hover{
  animation: grow;
  width: 200px; /*i'll talk to you about this later*/
}
#logoText{
   width: 100%;
   text-align: center;
   font-size: 5vw;
   transform: skew(10deg);
}
/* There's a cooler way to do this :3 see line:
#nav{
    background-color: darkkhaki;
      scrollbar-color: darkkhaki khaki;

}
#header{
    background-color: darkkhaki;
}
#content{
    background-color: #e3dcb1;
      scrollbar-color: khaki darkkhaki;
}
*/
#footer{
    background-color: gray;
    height: 3em;
}
#colLeft{
    position: absolute;
    width: 25vw;
    height: 100%;
    padding-left: 3vw;
}
#colRight{
    width: 63vw;
    height: 100%;
    position: absolute;
    left: 31vw;
}
#main{
  height: 93vh;
}  
body {
  overflow: hidden;
}
#logo, #header{
  top: 3vh;
  height: 20%;
  transform: skew(-10deg);
  position: relative;
}

#nav, #content{ 
  transform: skew(10deg);
  height: 65%;
  position: relative;
  left: 2vw;
  top: 6%;
  overflow-y: auto; /*use "auto" instead of "scroll" - hides the scrollbar if content height doesn't exceed parent height*/
  overflow-x: hidden;
  scrollbar-width: thin;
}
.panel { /*previously was each individual id so i gave them all a class instead*/
  outline: 5px rgba(255, 255, 255, 0.6) inset;
  outline-offset: -5px; /*so they will overlay the sepia filter'd panel-background*/
  background-color: rgba(0,0,0,0);
  backdrop-filter: sepia(1);
  filter: drop-shadow(0, 0, 1em, black);
  padding: 5px;
  margin: -5px;
}


.bg {
  position: absolute;
  left: -110px; /*i thought this would be relative but nah*/
  width: calc(100vw + 111px);
  z-index: -100;
  background: linear-gradient(90deg, #e3b2b1 20%, #c0e3b1 50%);
}
#bg1{
  transform: skew(-10deg); /*why the fuck were you rotating the gradient lmao*/
  transform-origin: 50% 100%; /*THIS ALIGNS THE...