JSFiddle - React, Tailwind, and code Playground

HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<link rel="shortcut icon" href="clade.png" />
<link rel="stylesheet" type="text/css" media="screen" href="style3.css" />
<title>SuomiWiki</title>
<script src="jquery-1.10.2.min.js">
</script>
</head>

<body> 
<div id="contentbg">
<div id="content">
<span><h1 id="noshow" style="display:none;">Welcome</h1></span>
		<div style="
		font-family: century gothic; 
		opacity: 1; 
		color: #000000
		animation:mymove 5s;
-webkit-animation:mymove 5s; /*Safari and Chrome*/
		">
		<p>This is a project of an all-knowing website about Finland.</p><br>
		But whether you're a foreign, planning a trip to Finland<br> 
        or a <a href="/suomi/index.html" title="Suomen kielinen versio!" style="color: inherit;
  text-decoration: inherit;"><u>Finn</u></a> looking for places to visit, feel free to stay.<br>
		The site should have something to offer for both of you!</p>
		<p>If not, please leave us some feedback at <a href="feedback.html" style="color: inherit;
  text-decoration: inherit;"><u>Contact</u></a></p>
  <p>Ready? Start browsing. We suggest you start from &quot;About&quot;.</p>
	</div>
	</div>
	</div>
	<script>
$("#blackbox").hover(function()
     $("#navibar").fadeIn();
  });
  </script>
<div id="blackbox"/>
<div id="blacktxt">
Navigation
</div>
<nav>
    <ul>
        <li><a href="About">About</a>
		    <ul>
                <li><a href="abfin">About Finland</a></li>
		        <li><a href="#">About Us</a></li>
        </li>
    </ul>
</div>
</body>
</html>

CSS

#blackbox {
background: black; 
width: 90px; 
height: 80px; 
color: white; 
text-align: center; 
font-family: Times; 
font-size: 20px;
position: fixed;
left: 0px;
bottom: 100px;
opacity: 0.5;
margin-bottom: 10px;
-moz-transition: opacity 0.5s, width 3s ease-in-out; /* Firefox 4 */
    -webkit-transition: opacity 0.5s, width 3s ease-in-out;/* Safari and Chrome */
    -o-transition: opacity 0.5s, width 3s ease-in-out; /* Opera */
    -ms-transition: opacity 0.5s, width 3s ease-in-out; /* Explorer 10 */
	}
	

#blackbox:hover {
opacity: 0.8;
width: 800px;
}
	
#blacktxt {
margin-top: 10px;
height: 60px;
transition: opacity 0.5s, width 5s;
position: absolute;
font-family: cursive;
cursor: default;
}

#blacktxt:hover {
opacity: 0;
}
	
#blackbox:hover > nav ul {
display: inline;
}

#navibar {
opacity: 0.8;
color: white;
width: 0;
height: 80px;
}

#content {
width: 700px;
		font-family: century gothic; 
		opacity: 1; 
		color: #000000;
		animation:mymove 5s;
-webkit-animation:mymove 5s; /*Safari and Chrome*/
}


@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
}

#content:hover {
}

#contentbg {
width: 700px;
transition: background 5s, opacity 5s ease-in;
border-radius: 5px;
}

#change {
	text-decoration: bold, italic;
	font-size: 30px;
	color: lightblack;
	font-family: century gothic;
	width: 400px;
	}

#contentbg:hover {
background: white;
opacity: 0.6;
top: 0%;
right: 0%;
}

h1 span.noshow {display:inline; text-align:left;}
h1 span.show {display:none; text-align:right;}
h1:hover span.show {display:inline; cursor:default; text-align:left;}
h1:hover span.noshow {display:none; cursor:default; text-align:right;}

::-webkit-scrollbar {
      width: 15px;
	  }
	  
::-webkit-scrollbar-track {
	  background-color: #9C9C9C;
      
}

::-webkit-scrollbar-thumb {
      background-color: linear-gradient(top, #efefef 20%, #bbbbbb 80%);
} 
::-webkit-scrollbar-button {
     ...

JavaScript

$(function() {
            $('#noshow').fadeIn(5000);
      });