JSFiddle - React, Tailwind, and code Playground

HTML

<p>Some text before blockquotes</p>

<blockquote>
<p><strong>1st blockquote</strong></p>
<p>1st paragraph. Foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo.</p>
<p>2nd paragraph. Bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar.</p>
</blockquote>

<blockquote>
<p><strong>2nd blockquote</strong></p>
<p>1st paragraph. Foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo.</p>
<p>2nd paragraph. Bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar.</p>
</blockquote>

<p>Some text after blockquotes</p>

CSS

body { width: 400px; }

p { margin-top: 0; margin-bottom: 0.5em; }

blockquote {
    background-color: antiquewhite;
    padding-top: 0.5em; padding-bottom: 0.5em;
    margin-top: 0; margin-bottom: 0.5em;
}

/* Two workarounds */
/*
blockquote { padding-bottom: 1px; }
blockquote { padding-bottom: 0; border-bottom: 1px solid antiquewhite; }
*/

/* Will not work, due to padding/margin collapsing, as I understand */
blockquote { padding-bottom: 0; }