JSFiddle - React, Tailwind, and code Playground

by Ryan Neufeld

HTML

<ul>
    <li onclick="$('section').slideUp(500);$('#no_margin').slideToggle(500);">no margin</li>
    <li onclick="$('section').slideUp(500);$('#top_margin').slideToggle(500);">top margin</li>
    <li onclick="$('section').slideUp(500);$('#bottom_margin').slideToggle(500);">bottom margin</li>
    <li onclick="$('section').slideUp(500);$('#top_right_bottom_left_margin').slideToggle(500);">top right bottom left margin</li>
    <li onclick="$('section').slideUp(500);$('#right_bottom_left_margin').slideToggle(500);">right bottom left margin</li>
    <li onclick="$('section').slideUp(500);$('#top_margin_and_no_margin').slideToggle(500);">top margin and no margin</li>
    <li onclick="$('section').slideUp(500);$('#no_margin_and_top_margin').slideToggle(500);">no margin and top margin</li>
</ul>
<section id="no_margin">
    <p>
        This paragraph has no margin.
    </p>
</section>
<section id="top_margin" style="display: none;">
    <p class="top_margin">
        This paragraph has a top margin.
    </p>
</section>
<section id="bottom_margin" style="display: none;">
    <p class="bottom_margin">
        This paragraph has a bottom margin.
    </p>
</section>
<section id="top_right_bottom_left_margin" style="display: none;">
    <p class="top_right_bottom_left_margin">
        This paragraph has top, right, bottom and left margin.
    </p>
</section>
<section id="right_bottom_left_margin" style="display: none;">
    <p class="right_bottom_left_margin">
        This paragraph has right, bottom and left margin.
    </p>
</section>
<section id="top_margin_and_no_margin" style="display: none;">
    <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" style="display: none;">
    <p class="no_margin">
        This paragraph has no margin.
    </p>
    <p class="top_margin">
        This paragraph has a top margin.
    </p>
</section>

CSS

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;
}