JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tabpan">
    <li class="tab" data-url="http://jquery.com" id="tab_1">One</li>
    <li class="tab" data-url="http://www.irs.gov/pub/irs-pdf/fw4.pdf" id="tab_2">Two (PDF)</li>
    <li class="tab" data-url="http://1and1.com" id="tab_3">Three</li>
</ul>

<iframe id="mainFrame" src="http://1and1.com"></iframe>

CSS

ul li {
    cursor: pointer;
    padding: 5px;
}

ul li:hover {
    background: #e5e5e5;
    border-radius: 10px;
}

#mainFrame {
    width: 100%;
    height: 400px;
}

JavaScript

$('.tabpan .tab').click(function(){
    src = $(this).attr('data-url');
    $('#mainFrame').attr('src', src);
});