JSFiddle - React, Tailwind, and code Playground

by rsrsrs

HTML

<div class="container">
  <div class="row">
    <a class="show show-active" target="1">Section 1</a>
    <a class="show" target="2">Section 2</a>
    <a class="show" target="3">Section 3</a>
    <a class="show" target="4">Section 4</a>
    <a class="show" target="5">Section 5</a>
    <a class="show" target="6">Section 6</a>
  </div>
</div>
<div class="container">
  <div class="section" id="section1">
    <h1>Section 1</h1>
    <p>Curabitur sed nunc ac justo iaculis condimentum. Nunc convallis tempor faucibus. Nulla ultrices libero quis ipsum mattis molestie. Nam varius, nulla tristique facilisis eleifend, elit odio dapibus nisi, eget convallis nisi augue non dui. Pellentesque semper elementum enim, et hendrerit nunc convallis id. Curabitur a magna pharetra, viverra neque nec, lobortis ligula. Vestibulum eget tempor enim. Aliquam et cursus neque.</p>
  </div>
  <div class="section" id="section2">
    <h1>Section 2</h1>
    <p>Duis varius mollis fringilla. Proin a vehicula metus. Nam ornare ipsum justo, non placerat ligula consectetur sit amet. Curabitur suscipit ligula porttitor nisi mollis imperdiet. Sed blandit sapien in est tristique, eu bibendum arcu cursus. Aenean iaculis lorem vulputate libero egestas ornare. Aenean auctor vehicula lorem, in mollis ex scelerisque vitae. In hac habitasse platea dictumst. Nulla accumsan tristique eros, non dapibus turpis sollicitudin nec. Etiam a turpis sit amet purus feugiat vestibulum id at nisl. Cras vitae lacus massa. Integer eu ex efficitur, cursus magna quis, dignissim erat.</p>
  </div>
  <div class="section" id="section3">
    <h1>Section 3</h1>
    <p>Proin placerat sem est, volutpat ornare diam vestibulum at. Aenean non sapien volutpat, consequat turpis ut, condimentum metus. Aliquam luctus dui et urna suscipit pharetra. Proin viverra lacus sed semper accumsan. Nam urna ante, vehicula nec dui eget, consequat elementum orci. Nam in feugiat diam, ut vestibulum metus. Morbi dapibus commodo congue. Integer ut finibus...

CSS

body {font-family:Arial, Helvetica, Sans-Serif;}
p {font-size:16px; line-height:22px;}
.container {max-width:1200px; margin:0 auto;}
.row {width:100%; padding:20px 0;}
a.show {background:#ffc600; display:inline-block; padding:20px; cursor:pointer; margin:0 5px 10px 0;}
a.show:hover, a.show-active {background:#d9a904;}
.section {background:#eee; padding:20px;}

JavaScript

$('.section').not("#section1").hide();
    $('.show').click(function () {
        $("a.show-active").removeClass("show-active");
        $(this).addClass("show-active");
        $('#section' + $(this).attr('target')).fadeIn(400).siblings('.section').fadeOut(0);
    });