JSFiddle - React, Tailwind, and code Playground

by Dipak1991

HTML

<div class="header"> <a href="javascript:void(0);">Sign In</a>
 <a href="javascript:void(0);">Sign Out</a>

</div>
<div class="nav-bar">
    <ul>
        <li><a href="javascript:void(0);">Home</a>

        </li>
        <li><a href="javascript:void(0);">Link2</a>

        </li>
        <li><a href="javascript:void(0);">Dropdown2</a>

            <ul class="submenu">
                <li><a href="javascript:void(0);">Sumenu</a>

                </li>
                <li><a href="javascript:void(0);">Sumenu</a>

                </li>
                <li><a href="javascript:void(0);">Sumenu</a>

                </li>
            </ul>
        </li>
    </ul>
</div>
<div class="logo">
    <img src="xyz" alt="contactus" />
    <br class="clearfix" />
</div>
<div class="body">
    <div class="pull-left">
        <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
        <div class="contactinfo">
             <h3>
                Department links
            </h3>

            <ul>
                <li><a href="javascript:void(0);">Address 1</a>

                </li>
                <li><a href="javascript:void(0);">Address 2</a>

                </li>
            </ul>
            <h3>
                Postal Address
            </h3>

            <ul>
                <li><a href="javascript:void(0);">Address 1</a>

                </li>
                <li><a href="javascript:void(0);">Address 2</a>

                </li>
            </ul>
             <h3>
                Report violation
            </h3>
            <p>
                content here
            </p>
        </div>
    </div>
    <div class="pull-right">
        <div></div>
        <div></div>
    </div>
    <br class="clearfix" />
</div>
<div class="footer">Footer</div>

CSS

html {
    margin:0;
    padding:0;
    box-sizing: border-box;
    word-wrap: break-word;
}
.header {
    position: fixed;
    top:0;
    left:0;
    right:0;
    height:20px;
    background: #797979;
    text-align: right;
}
.footer {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    text-align: center;
}
.body {
    position: relative;
    width:100%;
    height:100%;
    margin-top: 25px;
    border: 1px solid red;
    padding: 10px 10px;
}
a {
    text-decoration: none;
}
a:hover {
    color: #9CDD87;
    text-decoration: none;
    font-weight: bold;
}
ul {
    list-style: none;
    padding:0;
    margin:0;
}
.nav-bar {
    width: 100%;
    margin-top:20px;
    text-align: center;
}
.nav-bar ul > li {
    display: inline-block;
    position: relative;
}
.submenu {
    display: none;
    position: absolute;
    top:100%;
    float:left;
}
.logo img {
    width: 100%;
    height:20px;
    margin-top:10px;
    float: left;
}
.clearfix {
    overflow: hidden;
    clear:both;
}
.pull-left {
    float: left;
    width: 70%
}
.pull-right {
    float: left;
    width: 30%
}
.contactinfo h3 {
    font-weight: bold;
}

JavaScript

$(document).on("click", "ul li a", function () {
    event.preventDefault();
    $(this).siblings(".submenu").toggle(300);
});