JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<ul>
    <li>no margin</li>
    <li>top margin</li>
    <li>bottom margin</li>
    <li>top right bottom left margin</li>
    <li>right bottom left margin</li>
    <li>top margin and no margin</li>
    <li>no margin and top margin</li>
</ul>
<section id="no_margin">
    <p>
        This paragraph has no margin.
    </p>
</section>
<section id="top_margin">
    <p class="top_margin">
        This paragraph has a top margin.
    </p>
</section>
<section id="bottom_margin">
    <p class="bottom_margin">
        This paragraph has a bottom margin.
    </p>
</section>
<section id="top_right_bottom_left_margin">
    <p class="top_right_bottom_left_margin">
        This paragraph has top, right, bottom and left margin.
    </p>
</section>
<section id="right_bottom_left_margin">
    <p class="right_bottom_left_margin">
        This paragraph has right, bottom and left margin.
    </p>
</section>
<section id="top_margin_and_no_margin">
    <p class="top_margin">
        This paragraph has a top margin.
    </p>
    <p class="no_margin">
        This paragraph has no margin.
    </p>
</section>
<section id="no_margin_and_top_margin">
    <p class="no_margin">
        This paragraph has no margin.
    </p>
    <p class="top_margin">
        This paragraph has a top margin.
    </p>
</section>

CSS

section {
    display: block;
    float: left;
    clear: both;
}

p {
    margin: 0;
}

.top_margin {
    margin-top: 1em;
}

.bottom_margin {
    margin-bottom: 1em;
}

.top_right_bottom_left_margin {
    margin-top: 1em;
    margin-right: 1em;
    margin-bottom: 1em;
    margin-left: 1em;
}

.right_bottom_left_margin {
    margin-right: 1em;
    margin-bottom: 1em;
    margin-left: 1em;
}

JavaScript

$('li').each(function() {
    var $li = $(this),
        sectionId = $li.text().replace(/\s+/g, '_');
    $li.click(function() {
        $('#' + sectionId).slideUp(500).slideDown(500);
    });
});