JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
    
  <body>   
    <h1>Block-Level Quote</h1><br>
    <blockquote class="bq2">
      <span class="source">-GOB, "Arrested Development"</span>
      <p>Well, I will tell you this, Michael. I don't have a son. But if I ever do, I'm either going to take him to the cabin in the woods, or I'm going to promise to take him and then not take him. But the one thing that I will never do is not tell him that I'm taking him to a cabin in the woods, and then not take him!</p>        
      </blockquote>
      <br>
  </body>
</html>

CSS

body { padding: 11px 15px; font-family: Arial, Tahoma, sans-serif; font-size: 12px; color: #454545; line-height: 14px; }

/** blockquote styles **/
.bq2 { overflow: hidden; border: 1px solid #dde5ed; background: #FFC477; color: #758fa3; }

.bq2 .source { display: block; margin-bottom: 5px; font-weight: bold; font-size: 20px; text-align:center; text-shadow: 0px 1px 0px #f8fafb; padding: 6px 11px; background: #f8fafb; border-top: 1px solid #f4f7fa; border-bottom: 1px solid #dde5ed; }

.bq2 p { font-size: 16px; line-height: 22px; font-style: italic; text-align:center; padding: 5px 15px 15px 15px; }