JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<h1>Tutorial Blog for Stylish Blogger</h1>
<div id="navWrap1">
<div id="navWrap2">

<ul>
<li>
<a href="#"> Home</a>
<ul>
<li> 
<p style="font-weight:bold;color:#333">Welcome to ABC.com</p> 
<img src="http://weebtutorials.com/images/bluestylish2/navLine.png" height="2" width="418" alt="line"/>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</li>
</ul>
</li>

<li>
<a href="#"> About</a>
<ul>
<li> 
<p style="font-weight:bold;color:#333">About us</p> 
<img src="http://weebtutorials.com/images/bluestylish2/navLine.png" height="2" width="418" alt="line"/>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</li>
</ul>
</li>

<li>
<a href="#">Contact</a>
<ul>
<li> 
<p style="font-weight:bold;color:#333">Contact</p> 
<img src="http://weebtutorials.com/images/bluestylish2/navLine.png" height="2" width="418" alt="line"/>
<form  method="post" action="#">
<p> Name </p>
<input type="text" name="Name"/>
<p> Email: </p>
<input type="text" name="Email"/>
<p> Comments: </p>
<textarea name="comments" cols="40" rows="5">
Enter your message here!
</textarea>
<br/>
<br/>
<input type="submit" value="Submit" />
</form>
</li>
</ul>

</li>
<li><a href="#"> Portfolio</a>
<ul>
<li> 
<p style="font-weight:bold;color:#333">Portfolio</p> 
<img src="http://weebtutorials.com/images/bluestylish2/navLine.png" height="2"...

CSS

*
{
    margin:0;
    padding:0;
}
body
{
    background:#debe94;
    color:#000;
    font:15px Calibri, Arial, sans-serif;
    text-shadow:1px 1px 1px #FFFFFF;
    padding:10px;
}
a,a:visited
{
    text-decoration:none;
    outline:none;
    color:#a00;
}
a:hover
{
    color:#fff;
}
footer
{
    background:#D3A76F;
    position:fixed;
    width:100%;
    border-top:1px solid #333;
    height:70px;
    bottom:0;
    left:0;
    color:#fff;
    text-shadow:1px 2px 0 #000;
}
footer h2
{
    font:25px/26px Acens;
    font-weight:bold;
    left:70%;
    margin:0px 0 0 150px;
    padding:20px 0;
    position:relative;
    width:400px;
}
footer a.orig,
a.orig:visited
{
-moz-box-shadow:0px 0px 20px #000;
-webkit-box-shadow:0px 0px 20px #000;
box-shadow:0px 0px 20px #000;    
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
    border:none;
    text-decoration:blink;
    font-weight:bold;
    color:#f00;
    font-size:14px;
    left:37%;
    line-height:46px;
    margin:12px 0 0 -405px;
    position:absolute;
    top:0;
    width:75px;
}
.cred
{
    padding-top:50px;
}
h1{text-align:center;text-shadow:3px 3px 5px #000;padding:55px;font-family: Verdana, Geneva, sans-serif;font-size:20pt;color:#D3A76F;}
#navWrap1 {
border: thin #2e363f solid;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
width: 1000px;
margin: 0 auto;
}
#navWrap2 {
border: thin #a9c2dc solid;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background: #678;
padding: 0px 20px;
}

/* Styling the list */

#navWrap2 > ul {
list-style: none;
padding: 0;
margin: 0;
padding-top: 5px;
font-family: Tahoma, Geneva, sans-serif;
}
#navWrap2 > ul > li {
float: left;
position: relative;
}
#navWrap2 > ul > li > a {
padding: 10px 20px 15px 20px;
text-decoration: none;
color: #456;
text-shadow: #8194a8 1px 1px 0px;
font-weight: bold;
font-size: 17px;
display: block;
margin-left: 2px;
margin-right: 2px;
margin-top: 2px;
}

/* Styling the hover effect...