JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<ul id="tabs">
    <li><a href="#panel1">Panel 1</a></li>
    <li><a href="#panel2">Panel 2</a></li>
    <li><a href="#panel3">Panel 3</a></li>
</ul>

<section id="panelwrap">
    <article id="panel1">
        <h1>This is panel 1</h1>
        
        <p>
          panel 1 panel 1 panel 1 panel 1 panel 1 panel 1 panel 1 panel 1 
        </p>
    </article>
    
    <article id="panel2">
        <h1>This is panel 2</h1>
        
        <p>
          panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 
            panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 
            panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 
        </p>
        
        <p>
          panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 
            panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 
            panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 
        </p>
    </article>
    
    <article id="panel3">
        <h1>This is panel 3</h1>
        
        <p>
          panel 3 panel 3 panel 3 panel 3 panel 3 
        </p>
        <p>
          panel 3 panel 3 panel 3 panel 3 panel 3 
        </p>
        <p>
          panel 3 panel 3 panel 3 panel 3 panel 3 
        </p>
        <p>
          panel 3 panel 3 panel 3 panel 3 panel 3 
        </p>
        <p>
          panel 3 panel 3 panel 3 panel 3 panel 3 
        </p>
        <p>
          panel 3 panel 3 panel 3 panel 3 panel 3 
        </p>
        <p>
          panel 3 panel 3 panel 3 panel 3 panel 3 
        </p>
    </article>
</section>

CSS

#panelwrap {
    width:600px;
    border:5px solid #333;
    clear:both;
    background:#eee;
    overflow:hidden;
}

#tabs {
    margin:0;
    padding:0;
}

#tabs li {
    list-style:none;
    float:left;
    margin-right:5px;
}

#tabs li a {
    display:block;
    padding:15px;
    background:#888;
    color:#fff;
    text-decoration:none;
}

#tabs li a:hover, .selected {
    background:#333 !important;
}

article {
    padding:20px;

}

article h1 {
    font-size:30px;
    margin:0 0 10px 0;
}

p {
    margin:10px 0;
}

JavaScript

var p = $("article"),
    t = $("#tabs li a");

p.hide();
t.click(function(e) {
    e.preventDefault();
    p.hide();
    ph = $(this.hash).outerHeight();
    $(this.hash).show().parent().animate({
        "height": ph
    });

    t.removeClass("selected");
    $(this).addClass("selected");
}).filter(':first').click();