JSFiddle - React, Tailwind, and code Playground

by Please_Reply

HTML

<body style="margin-top:0">
<div id="container"> <!-- BEGINNING OF CONTAINER -->
    
    <div id="header"> <!-- BEGINNING OF HEADER -->
    
    <div id="logo"> <!-- BEGINNING OF LOGO -->
    
    <img alt="Logo" src="images/simpsonsLogo.png" height="80" style="margin-top:10px; margin-left:60px">
    
    </div> <!-- END OF LOGO -->
    
    <div id="navigation">  <!-- BEGINNING OF NAVIGATION -->
    
    <a href="index.html"><div class="buttonBorder"><center>Home</center></div></a>
    <a href="About.html"><div class="buttonSelected"><center>About</center></div></a>
    <a href="Pictures.html"><div class="buttonBorder"><center>Pictures</center></div></a>
    <a href="Contact.html"><div class="buttonBorder"><center>Contact</center></div></a>
    
    </div> <!-- END OF NAVIGATION -->
    
    </div> <!-- END OF HEADER -->
    
    <div id="body"> <!-- BEGINNING OF BODY -->
      <div style="margin-top:8px; font-size: 30px"><center>
        About Page
      </center></div>
    <div style="margin-top:8px">Below is a table containing the ages of the members of the main Simpsons family.<br /><br />
    <table width="300" border="1">
  <tr>
    <td bgcolor="#ed3133"><b>Name</b></td>
    <td bgcolor="#ffd636"><b>Age (Years)</b></td>
  </tr>
  <tr>
    <td bgcolor="#F37676">Bart</td>
    <td bgcolor="#FFE16A">10</td>
  </tr>
  <tr>
    <td bgcolor="#F37676">Homer</td>
    <td bgcolor="#FFE16A">36</td>
  </tr>
  <tr>
    <td bgcolor="#F37676">Lisa</td>
    <td bgcolor="#FFE16A">8</td>
  </tr>
  <tr>
    <td bgcolor="#F37676">Maggie</td>
    <td bgcolor="#FFE16A">18 months</td>
  </tr>
  <tr>
    <td bgcolor="#F37676">Marge</td>
    <td bgcolor="#FFE16A">34</td>
  </tr>
    </table>
	<br />
	There are more members of the Simpson family which are listed below, refer to the family tree.<br />
    
    <ul>
    <li>Abraham Simpson (Homer's Father)</li>
    <li>Clancy Bouvier (Marge's Father)</li>
    <li>Herb Simpson (Homer's Brother)</li>
    <li>Jackie Bouvier (Marge's...

CSS

#container{
   height:920px;
   width:960px;
   background-color:#000;
   margin:auto;
   float: none;
}
#header{
   height:100px;
   width:960px; 
   float:left;
   background-color:white;
}
#navigation{
   height:100px; 
   width:660px; 
   font-size:30px;
   color:black;
   font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   float:left;
   background-color:white;
}
#logo{
   height:100px;
   width:300px; 
   float:left;
   background-color:white;
}
#body{
   height:770px;
   width:920px;
   background-color:#0081c3;
   color:white;
   font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size:20px;
   padding-left:20px;
   padding-right:20px;
   padding-top:20px;
   float:left;
}
#footer{
   height:50px;
   width:960px;
   font-size:16px;
   text-align:center;
   background-color:white;
   color:black;
   padding-top:27px;
   font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   float:left;
}
html{
   /*background-color:#ffd636;*/
   background-image:url(images/background.jpg);
   -webkit-background-size:cover;
   -moz-background-size:cover;
   -o-background-size:cover;
   background-size:cover;
}
a:Link{ 
   text-decoration:none; 
}
a:visited{
   text-decoration:none; 
}
a:hover{
   text-decoration:none; 
}
a:active{
   text-decoration:bold; 
}
img{
   border-style: none;
}

.buttonBorder{
   width:165px;
   height:100px;
   padding-top:31px;
   color:white;
   float:left;
   border-left: 1px solid white;
   box-sizing: border-box;
   background-color:#ffd636;
}
.buttonSelected{
   width:165px;
   height:100px;
   padding-top:31px;
   color:white;
   float:left;
   border-left: 1px solid white;
   box-sizing: border-box;
   background-color:#ed3133;
}
.buttonBorder:hover{
   color:#ffd636;
   background-color:white;
}
td{
   width:150px;	
}
.enlargeImage:hover{
   transform:scale(1.5,1.5);
   transform-origin:0 0;
}
.enlargeImage:hover ~ #body {
   height:1000px;
}