JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<div class="quote">
    <div class="quote_text_box">
        <div class="text">
            <p>Here's a quote. It can be pretty much any length. Normally, they tend to go on for two to four lines, and the font size is responsive, as is the size of the container around them.</p>
              <div class="label">
                  <h2>Quote Source Name</h2>
                  <p>Source Description</p>
                  <div class="circle-photo-div"></div>
               </div>
        </div>
    </div>
</div>

CSS

.quote {
  position: relative;
  display: table-cell;
  width: 600px;
  margin: 5% 0 5% 20%;
  vertical-align: top; }

.quote .quote_text_box {
  vertical-align: bottom;
  background: white;
  padding: 6% 5% 5% 6%;
  position: relative;
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2); }

.quote .quote_text_box .text {
  margin-bottom: 5.5em; }

.quote .quote_text_box .text p {
  line-height: 1.5;
  font-size: 1.7vw;
  font-style: italic;
  font-weight: lighter;
  margin: auto; }

.quote .quote_text_box .label {
  position: absolute;
  left: 20%;
  bottom: 7%; }

.quote .quote_text_box .circle-photo-div {
  background: url(http://philosophyforchange.files.wordpress.com/2012/04/socrates1.jpg);
  position: absolute;
  bottom: -65px;
  left: -160px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  -webkit-border-radius:  50%;
  -moz-border-radius:  50%;
  margin: 1em auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-border-radius: 99em;
  -moz-border-radius: 99em;
  border-radius: 99em;
  border: 5px solid white;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.8); }