<p>Paragraph before quote.</p>

<figure class="quote">
  <blockquote>
    But web browsers aren’t like web servers. If your back-end code is getting so big that it’s starting to run noticably slowly, you can throw more computing power at it by scaling up your server. That’s not an option on the front-end where you don’t really have <em>one</em> run-time environment—your end users have their own run-time environment with its own constraints around computing power <strong>and</strong> network connectivity.
  </blockquote>
  <figcaption>
    &mdash; Jeremy Keith, <cite>Mental models</cite>  </figcaption>
</figure>

<p>Paragraph after quote.</p>

body {
  margin: 1em;
  font: 1.2rem/1.4 Georgia, serif;
}
.quote {
  margin: 0;
  background: #eee;
  padding: 1em;
  border-radius: 1em;
}
.quote figcaption,
.quote blockquote {
  margin: 1em;
}