JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<blockquote class="single">
<p>The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring.</p>
<p>The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring.</p>
<span class="quote_author">Hello Man</span>
</blockquote>


<blockquote class="double">
Well done is better than well said. — Benjamin Franklin
</blockquote>

CSS

blockquote.single {font-style: italic;margin:20px 0;font-family:Arial;font-size:16px;border:solid #C1E1C1;border-width:2px 0;padding:10px 20px;line-height:28px;position:relative;color:#555555;}

blockquote.single::before {font-style: normal;font-family:Arial;font-size:50px;content: open-quote;position:absolute;top:-5px;left:0;right:0;color:#C1E1C1;
background-color:#ffffff;text-align:center;width:30px;height:10px;margin:auto;display:block;
}

.quote_author {display:block;text-align:right;margin-bottom:10px;font-size:15px;font-style: normal;color:#444444;}

@media (max-width: 480px) {
blockquote.single {padding:10px 10px;}  
  
}

blockquote.double { border-color:#0f0; background-color:#0f01; }