JSFiddle - React, Tailwind, and code Playground

HTML

<figure>
<blockquote cite="urn:ISBN:978-4088511269">
<p>さすがディオ！おれたちにできない事を平然とやってのけるッ<br>
そこにシビれる！あこがれるゥ！</p>
</blockquote>
    <p class=""><cite>ジョジョの奇妙な冒険 １巻 83頁</cite> 少年</p>
</figure>

CSS

figure {
    margin: 10px ;
    padding: 0 10px 10px ;
    border: 1px #000 solid ;
}

blockquote {
    text-align: center ;
    position: relative ;
    background: #fff ;
}

blockquote::before,
blockquote::after {
    position: absolute ;
    font: 4em Georgia ;
    color: #f66 ;
}

blockquote::before {
    top: 0 ;
    left: 0 ;
    content: "“" ;
}

blockquote::after {
    bottom: -0.5em ;
    right: 0em ;
    content: "”" ;
}

blockquote p {
    padding: 20px ;
}

blockquote+p {
    text-align: right ;
}

p cite::before {
    content: "― " ;
}