JSFiddle - React, Tailwind, and code Playground

HTML

<blockquote>
    <span class="quote open">&rdquo;</span>
    1. Hello
    <span class="quote close">&ldquo;</span>
</blockquote>
<br>
<blockquote>
    <span class="quote open">&rdquo;</span>
    2. Some dynamic words are going to be shown here&hellip;
    <span class="quote close">&ldquo;</span>
</blockquote>
<br>
<blockquote>
    <span class="quote open">&rdquo;</span>
    3. A a a a a a a a a a a a a a a a a a a a a a a a a a a a a a
    <span class="quote close">&ldquo;</span>
</blockquote>
<br>
<blockquote>
    <span class="quote open">&rdquo;</span>
    4. Principia Mathematica
    <span class="quote close">&ldquo;</span>
</blockquote>
<br>

CSS

blockquote {
    position: relative;
    left: 20px;
    top: 20px;
    background-color: #eee;
    margin-bottom: 20px;
    max-width: 140px;
    display: inline-block;
}
.quote {
    font-size: 34px;
    position: absolute;
}
.open {
    left: -20px;
    top: -5px;
}
.close {
    right: -20px;
    bottom: -16px;
}