JSFiddle - React, Tailwind, and code Playground

by swati

HTML

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <title>MDS Preparation</title>
     
  
</head>
<body>
       <div id="header">
    <div id="logo">
    </div>
    <div id="name">
    <h2 class="style3">Aim MDS<br /></h2> 
    <p class="p"> a complete solution for MDS preparation</p>
     </div>
    <div id="punchline">
    <h1 class="h1">Some People Dream of Success, ....While Others Wake up and work hard at it !!!</h1>
        
    </div>
   
    </div>
    <div id="divider">
    </div>
        <div id="bodybg"> 
<div id="nav">
    <ul>
        <li class="mainlist"><a href="#">Home</a>
        <ul>
            <li><a href="#">Home 1</a></li>
             <li class="sublevel"><a href="#">Home 2 &raquo;</a>
           <ul>
             <li><a href="#">subHome 1</a></li>
             <li><a href="#">subHome 2</a></li>
             <li><a href="#">subHome 3</a>
         </ul>  
             </li>
             <li class="sublevel"><a href="#">Home 3 &raquo;</a>
         <ul>
             <li><a href="#">subHome 1</a></li>
             <li><a href="#">subHome 2</a></li>
             <li><a href="#">subHome 3</a>
         </ul>    
         </li>
        </ul>
        </li>


        <li class="mainlist"><a href="#">Home</a>
        <ul>
            <li><a href="#">Home 1</a></li>
             <li class="sublevel"><a href="#">Home 2 &raquo;</a>
           <ul>
             <li><a href="#">subHome 1</a></li>
             <li><a href="#">subHome 2</a></li>
             <li><a href="#">subHome 3</a>
         </ul>  
             </li>
             <li class="sublevel"><a href="#">Home 3 &raquo;</a>
         <ul>
             <li><a href="#">subHome 1</a></li>
             <li><a href="#">subHome 2</a></li>
             <li><a href="#">subHome 3</a>
         </ul>    
         </li>
        </ul>
        </li>


         <li class="mainlist"><a href="#">Home</a>
        <ul>
           ...

CSS

body {
    background-image:url('images/aimmdsbg_01.gif');
    background-repeat:repeat-x;
    margin:0 10% 0 10%;
    padding:0 0 0 0;
    border:0 0 0 0;
     
}

#header{
background-color:transparent;
width:100%;
margin:0 0 0 0;
width:inherit;
height:100px;
position:relative;
overflow:hidden;
    top: -1px;
    left: 0px;
}
 
#logo{
    background-image: url('images/rotated logo.png');
    background-repeat: no-repeat;
    background-attachment:scroll;
    background-position: left;
    padding: 0px;
    margin:10px auto 10px 10px;
     width:110px;
    height:100px;
    float: left;
}
#name{
float:left;
height:96px;
width:200px;
z-index: 1;
left: 94px;
top: 18px;
    
}

#punchline{
  
    padding: 0px;
    margin: 0px;
    width: 578px;
    height: 100px;
    float: left;
    clear: right;
}

#divider{
    background-image: url('images/divider.jpg');
    background-repeat: repeat-x;
    background-position:left top;
    padding: 0px;
    margin: 0px;
   height: 3px;
   margin-left: 0px;
}

#bodybg{
   width:100%;
   margin:0 auto;
   height:auto;
}

#nav{
    padding-left:2px;
    width:100%;
    height:33px;
    background-image:url('images/before.jpg');
    background-repeat:repeat-x;
    Overflow:visible;
    }
    

#nav ul{
    margin:0;
    padding:0;
    line-height: 33px; 
    }
    
    

#nav li{
    margin:0;
   padding:0;
   list-style:none;
   position:relative;
     float:left;
     border-bottom:1px groove #333;
     
    }
    
    
#nav ul li a{
    text-align:center;
    font-family:Verdana;
    font-size:small;
    text-decoration:none;
    height:33px;
    width:126px;
    display:block;
    color:White;
    border-right:1px solid #000;
    }
    
    
#nav ul ul{
    position:absolute;
    visibility:hidden;
    top:33;
    }
    
    #nav ul li:hover 
    {
         color:White;
     }
    
#nav ul li:hover ul{
    visibility:visible;
    }
    
#nav ul li:hover {
   font-size:medium;
    }
    
 #nav a:hover{
   color:aqua;
  ...