JSFiddle - React, Tailwind, and code Playground

by Cthulhu

HTML

<div id="historia">
            <div id="tabs">
                <ul>
                    <li><a href="#tab1"><p>Title1</p></a></li>
                    <li><a href="#tab2"><p>Title2</p></a></li>
                    <li><a href="#tab3"><p>Title3</p></a></li>
                </ul>
                
                <div id="historia_content">
                    <div id="tab1">
                        <p>Aliquam et enim et quam semper suscipit. Suspendisse ut diam nec enim semper egestas non non risus. Phasellus dignissim vehicula tortor, sit amet viverra dui scelerisque eu. Pellentesque vel sem risus. In id mauris neque. Nam eget lectus purus, non pretium libero. In fringilla elementum consectetur. Ut tincidunt tincidunt risus, nec elementum enim venenatis rhoncus. Sed eu massa mi.

Nunc venenatis ultrices lorem, non vulputate mauris pellentesque at. In hac habitasse platea dictumst. Sed consequat cursus mi, at fermentum ipsum aliquet nec. Ut sapien nisi, condimentum id egestas sed, fringilla ac massa. Sed sed erat justo. Nunc felis nunc, vehicula id convallis et, consectetur quis ligula. Curabitur rutrum faucibus nulla nec auctor. Sed nec iaculis dolor. Quisque ullamcorper magna vel libero lobortis molestie.</p>
                    </div>
                    <div id="tab2"><p>Cras bibendum mi eget tellus rhoncus nec commodo velit fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean ullamcorper quam enim. Ut cursus, dui at mollis ornare, lectus urna pretium odio, ut malesuada nulla velit nec tortor. Duis auctor ipsum vitae purus vulputate a placerat diam interdum. Vivamus adipiscing pellentesque justo, id interdum lorem iaculis a. Morbi sed imperdiet est. Ut hendrerit sem ut nisi ultricies lobortis quis ut nisl. Duis non dolor augue.

Nam vel lectus quam. Nunc nibh sapien, posuere sed euismod non, lacinia ac sapien. Maecenas dictum volutpat augue id placerat. Pellentesque mollis congue mauris sed commodo. Cras...

CSS

#historia {
    width:906px;
    margin:0 auto;
}

#historia #tabs {
    position:relative;
    float:left;
    width:906px;
}

#historia #tabs a {
    display:block;
    padding:9px 10px 3.4px 0;
}

#historia #tabs a p {
    font-size:9.5px;
    font-weight:normal;
}

#historia #tabs ul {
    list-style:none;
    float:left;
    width:210px;
    border-top:1px solid #1A1818;
}

#historia #tabs ul li {
    border-bottom:1px solid #1A1818;
    height:8.84%;
    text-align:right;
    color:#535353;
    text-transform:uppercase;
}

#historia #tabs ul li:hover {
    background:#4A6125;
}

#historia #tabs ul li:hover p, #historia #tabs ul li:active p {
    color:white;
}

#historia_content {
    width:318px;
    margin-left:244px;
    min-height:184px;
}

#historia_imgs {
    width:318px;
    position:absolute;
    top:0;
    right:0;
}

#historia_imgs img {
    width:318px;
}

JavaScript

$(function() {
    $("#historia").find("#tabs").tabs();
});