JSFiddle - React, Tailwind, and code Playground

by jackrugile

HTML

<div id="container">
    <a href="#section1">Section 01</a>
    <p id="section1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla neque orci, euismod eu laoreet vel, faucibus id neque. Nunc ac justo eu tortor malesuada ultricies. Duis elit leo, pellentesque in tempus at, ultricies commodo sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In vitae leo et turpis fringilla rhoncus auctor sit amet arcu.</p>
    <a href="#section2">Section 02</a>
    <p id="section2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla neque orci, euismod eu laoreet vel, faucibus id neque. Nunc ac justo eu tortor malesuada ultricies. Duis elit leo, pellentesque in tempus at, ultricies commodo sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In vitae leo et turpis fringilla rhoncus auctor sit amet arcu.</p>
    <a href="#section3">Section 03</a>
    <p id="section3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla neque orci, euismod eu laoreet vel, faucibus id neque. Nunc ac justo eu tortor malesuada ultricies. Duis elit leo, pellentesque in tempus at, ultricies commodo sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In vitae leo et turpis fringilla rhoncus auctor sit amet arcu.</p>
    <a href="#section4">Section 04</a>
    <p id="section4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla neque orci, euismod eu laoreet vel, faucibus id neque. Nunc ac justo eu tortor malesuada ultricies. Duis elit leo, pellentesque in tempus at, ultricies commodo sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In vitae leo et turpis fringilla rhoncus auctor sit amet arcu.</p>
</div>

CSS

body {
    font: 12px helvetica, arial, sans-serif;   
}

#container, a, p {
    width: 400px;   
}

a {
    background: #333;
    color: #fff;
    display: block;
    font-weight: bold;
    margin-bottom: 1px;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;    
}

a:hover {
    background: #555;    
}

JavaScript

$('p').hide();

$('a').click(function(e){
    e.preventDefault();
    var target = $(this).attr('href');
    $(target).slideToggle(500);
});