JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<body>
    <div id="wrapper">
        <div class="header"></div>
        <div class="menu_div">
            <ul>
                <li id="active"><a href="start.html">Home</a>
                </li>
                <li><a href="Gallery">Gallery</a>
                </li>
                <li><a href="Video Tour">Video Tour</a>
                </li>
                <li><a href="Restaurants">Restaurants</a>
                </li>
                <li><a href="Hotels">Hotels</a>
                </li>
            </ul>
        </div>
        <div class="content">
            <div class="iframe-box">//Here will be code of Iframe</div>
        </div>
        <div class="links"></div>
        <div class="footer"></div>
    </div>
</body>

CSS

<!-- #wrapper {
    margin:auto;
    min-width:481px;
    max-width:1024px;
    background-color:#ccc;
    min-height:300px;
}
.header {
    width:78%;
    background-image:url(headerstorannantext.jpg);
    background-color:#CCC;
    min-height:300px;
    background-color:#0F3;
    float:left
}
.menu_div ul {
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    color:#FFF;
    list-style:none;
    text-indent:15px;
}
.menu_div ul li {
    background:#66ccff;
    line-height:28px;
    border-bottom:1px solid #fff;
}
.menu_div ul li a {
    text-decoration:none;
    color:#FFF;
    display:block;
}
.menu_div ul li a:hover {
    background:#ffcc66;
}
.menu_div ul li#active {
    background:#ffcc66;
}
.content {
    width:78%;
    background-color:#CCC;
    min-height:300px;
    background-color:#FF0000;
    float:left;
}
.iframe-box iframe, .iframe-box object, .iframe-box embed {
    width: 100%;
    height: 396px;
}
.links {
    width:22%;
    background-color:#CCC;
    min-height:300px;
    background-color:#C93;
    float:left
}
.footer {
    width:100%;
    background-color:#CCC;
    min-height:50px;
    background-color:#0CF;
    float:left
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    #wrapper {
        margin:auto;
        width:100%: background-color:#CCC;
        min-height:300px;
    }
    .header {
        width:100%;
        background-color:#CCC;
        min-height:300px;
        background-color:#FF0000;
        float:left
    }
    .menu_div ul {
        font-family:Arial, Helvetica, sans-serif;
        font-size:15px;
        color:#FFF;
        list-style:none;
        text-indent:15px;
    }
    .menu_div ul li {
        background:#66ccff;
        line-height:28px;
        border-bottom:1px solid #fff;
    }
    .menu_div ul li a {
        text-decoration:none;
        color:#FFF;
        display:block;
    }
    .menu_div ul li a:hover {
        background:#ffcc66;
    }
    .menu_div ul...

JavaScript

$(document).ready(function () {
    $('.menu_div li a').click(function (e) {
        e.preventDefault();
        $('.iframe-box').html($(this).attr('href'));
        $(".menu_div ul li").removeAttr('id');
        $(this).parents('li').attr('id', 'active');
    })
})