JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <p>Too much bottom padding.</p>
    <p>How can I "remove" it?</p>
</div>
<div class="box">
    <ul>
        <li>Test1</li>
        <li>Test2</li>
        <li>Test3</li>
    </ul>
</div>
<div class="box">
    <p>There could be any number of any type of elements here...</p>
    <p style="margin-bottom:0">.. but it should always look like this, even in IE8.</p>
</div>

CSS

/* Example global typography */
p {
    margin:0 0 2em;   
}
ul {
    margin:0 0 2em;
}

.box {
    border:2px solid #ccc;
    background:#eee;   
    padding:1em;
    margin:1em;
}