<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet neque hic, incidunt mollitia. Eius autem, asperiores velit, quaerat blanditiis ratione.</p>
  <blockquote cite="Tim Berners-Lee">The Semantic Web is not a separate Web but an extension of the current one, in which information is given well-defined meaning, better enabling computers and people to work in cooperation.</blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam quam, dignissimos voluptas, vel provident delectus blanditiis assumenda sunt tenetur, cupiditate adipisci tempora beatae quibusdam quisquam nemo facilis illum voluptatibus eaque.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet neque hic, incidunt mollitia. Eius autem, asperiores velit, quaerat blanditiis ratione.</p>
</div>
@import url(https://fonts.googleapis.com/css?family=PT+Sans|Ubuntu:300,400,700);

body {
  background: #9b59b6;
  font: normal 300 1em/1.5em 'Ubuntu', sans-serif;
}

.container {
  background: #fff;
  width: 100%;
  max-width: 480px;
  min-width: 320px;
  margin: 2em auto 0;
  padding: 1.5em;
}

p { margin-bottom: 1.5em; }
p:last-child { margin-bottom: 0; }

blockquote {
  display: block;
  border-width: 2px 0;
  border-style: solid;
  border-color: #eee;
  padding: 1.5em 0 0.5em;
  margin: 1.5em 0;
  position: relative;
}
blockquote:before {
  content: '\201C';
  position: absolute;
  top: 0em;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 3rem;
  height: 2rem;
  font: 6em/1.08em 'PT Sans', sans-serif;
  color: #666;
  text-align: center;
}
blockquote:after {
  content: "\2013 \2003" attr(cite);
  display: block;
  text-align: right;
  font-size: 0.875em;
  color: #e74c3c;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js