JSFiddle - React, Tailwind, and code Playground

quote blockquote

by Jennifer Perrin

HTML

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cuprum:400,700,300,200"/>

<div class="quote">
	<blockquote>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</blockquote>
	
	<div class="attribution">
		<p class="author">Cleo DunKitty</p>
		<cite><a href="#">CEO of Meeces</a></cite>
		<div class="thumb"></div>
	</div>
</div>

CSS

body { 
    margin: 50px 20px; 
    background: url('http://jenniferperrin.com/envato/clientResponse/images/bg.png');
}

.quote {
    margin: 0 auto;
    padding-bottom: 50px;
    position: relative;
    width: 600px;
}
.quote p {
    margin: 0;
    padding: 0;
}

.quote blockquote {
    margin: 0;
    padding: 0;
    position: relative;
    background: none repeat scroll 0 0 #444;
    border-radius: 5px 5px 5px 5px;
    border-top: 2px #222 solid;
    padding: 30px;
}

.quote blockquote:after, .quote blockquote:before {
    border: medium solid transparent;
    content: " ";
    height: 0;
    position: absolute;
    top: 100%;
    width: 0;
}
.quote blockquote:after {
    border-top-color: #444;
    border-width: 10px;
    left: 85%;
    margin-left: -10px;
}
.quote blockquote:before {
    border-top-color: rgba(0, 0, 0, 0.01);
    border-width: 11px;
    left: 80%;
    margin-left: -11px;
}
.quote blockquote p {
    color: #FFFFFF;
    font-family: 'Cuprum';
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    position: relative;
    text-indent: 100px;
}
.quote blockquote p:before {
    color: #ad4625;
    content: "“";
    font-family: serif;
    font-size: 175px;
    font-style: normal;
    font-weight: 700;
    left: -105px;
    position: absolute;
    text-shadow: 7px 14px 10px rgba(0, 0, 0, 0.2);
    top: 0;
}
.quote .attribution {
    padding: 20px 100px 20px 20px;
    position: relative;
    text-align: right;
}

.quote .thumb {
    background: url("http://placekitten.com/100") no-repeat scroll center center transparent;
    border: 2px solid #444;
    border-radius: 10%;
    bottom: 5px;
    display: block;
    height: 60px;
    position: absolute;
    right: 10px;
    width: 60px;
}
    .quote .author {
        color: #ad4625;
        font-family: 'Cuprum';
        font-size: 18px;
        font-weight: 700;
    }

.quote cite a {
    color: #878787;
    font-family: 'Cuprum';
    font-style: italic;
    font-weight: 400;
   ...