JSFiddle - React, Tailwind, and code Playground

by Dele O

HTML

<!DOCTYPE>
<html>
   <head>
     <title>WebDev for NairaLand </title>  
  </head>
    
    <body>
        <div id="header">
        <h1>NairaLand Forum ::. programming</h1>
        <ul>
            <li>Welcome <a href="#">dele.o:</a></li>
            <li><a href="#">Edit Profile</a></li>
            <li><a href="#">Friends</a></li>
            <li><a href="#">Updated Topics</a></li>
            <li><a href="#">Logout</a></li>
        </ul>
        
        <form action="#">
            <input type="text" placeholder="that Lagos Boy for life...."/>
            <input type="submit" value="wetin u need?"/>
        </form>
        </div>
        
    </body>
</html>

CSS

#header {
    margin: 0 auto;
    width: 500px;
    background: #f0f0eb;
    padding: 10px;
    border: 1px solid #000;
     -webkit-border-radius: 12px;
     -moz-border-radius: 12px;
          border-radius: 12px;
  -moz-background-clip: padding; -webkit-background-clip: padding-box;    background-clip: padding-box;
    
  -webkit-box-shadow: 0px 0px 7px 0px #000;
     -moz-box-shadow: 0px 0px 7px 0px #000;
          box-shadow: 0px 0px 7px 0px #000;


}

#header h1 {
    font-size: 1.9em;
    font-variant: small-caps;
    margin-bottom: 3px;
}

#header ul {
    margin-bottom: 5px;
}

#header ul li {
    display: inline;
    margin-right: 10px;
}

#header ul li a {
    text-decoration: none;
    color: #769776;
}

#header ul li a:hover, ul li a:active {
    text-decoration: underline;
}

#header input[type=text]{
    width: 250px;
    border-right: 0;
    border-left: 0;
    border-top: 0;
    border-bottom: 2px dotted #000;
    background: #f0f0eb;
                            
}

#header input[type=submit]{
    margin-top:5px;
    border: 1px solid #000;
    padding: 2px 
}

JavaScript

$("#header ul li:eq(0)").click(function(e){
    e.preventDefault();
    $(this).hide('slow').delay(500).show('slow');
    $("#header input[type=text]").val($("#header ul li:eq(0)").text());
});

$("#header ul li:eq(1)").click(function(e){
    e.preventDefault();
    $(this).hide('slow').delay(500).show('slow');
    $("#header input[type=text]").val($("#header ul li:eq(1)").text());
});


$("#header ul li:eq(2)").click(function(e){
    e.preventDefault();
    $(this).hide('slow').delay(500).show('slow');
    $("#header input[type=text]").val($("#header ul li:eq(2)").text());
});


$("#header ul li:eq(4)").click(function(e){
    e.preventDefault();
    $("#header").hide(3000).delay(2000).show('fast');

});