JSFiddle - React, Tailwind, and code Playground

Header Idea

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<h1>This is a Heading 1</h1>
<h1 class="section-title"><span>This is a Heading 1 with a class of section-title</span></h1>

<div class="hr-line"></div>

<h2>This is a Heading 2</h2>
<h2 class="section-title"><span>This is a Heading 2 with a class of section-title</span></h2>

<div class="hr-line"></div>

<h3>This is a Heading 3</h3>
<h3 class="section-title"><span>This is a Heading 3 with a class of section-title</span></h3>

<div class="hr-line"></div>

<h3>This is a Heading 3 with pull-right content</h3>
<h3 class="section-title">
    <span>This is a Heading 3 with a class of section-title</span>
    <span class="pull-right head-right">
        <i class="fa fa-edit"></i>
    </span>
</h3>

<div class="hr-line"></div>

<div class="quote-wrap">
    <h6>This is a theme for me</h6>
    <p>Lorem ipsum dolor slo onsec  designs tueraliquet Morbi nec In Curabitur lreaoreet nisl lorem ipsum dolor slo onsec designs tueraliquet Morbi nec In Curabitur lreaoreet nisl lorem ipsum dolor slo onsec designs tueraliquet Morbi nec In Curabitur lreaoreet nisl</p>
    <div class="quote-author">
        <div class="quote-author-img">
            <img src="http://placehold.it/150x150" alt="" />
        </div>
        <h5>Robert Smith <span>Manager</span></h5>
    </div>
</div>
    
<div class="quote-wrap">
    <h6>This is a theme for me</h6>
    <p>Lorem ipsum dolor slo onsec  designs tueraliquet Morbi nec In Curabitur lreaoreet nisl lorem ipsum dolor slo onsec designs tueraliquet Morbi nec In Curabitur lreaoreet nisl lorem ipsum dolor slo onsec designs tueraliquet Morbi nec In Curabitur lreaoreet nisl</p>
    <div class="quote-author">
        <div...

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
body {
    margin: 15px 30px;
    background: #4072b4;
    font-family: 'Lato';
}

h1, h2, h3 { color: #ffffff; }

.section-title {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAYAAAAbQcSUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAtSURBVHjaYnz//v1/BioBxv//qWYWAxMDFcGoYaQDlg8fPlAtOgEAAAD//wMAjr0KqcS1riMAAAAASUVORK5CYII=) repeat-x scroll left 9px rgba(0, 0, 0, 0);
    color: #ffffff;
    font-size: 20px;
    margin: 0 0 30px;
    font-weight: 300;
}
.section-title span {
    background: none repeat scroll 0 0 #4072b4;
    padding-right: 10px;
}

.head-right {
    padding-left: 10px;
}

.hr-line {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAYAAAAbQcSUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAtSURBVHjaYnz//v1/BioBxv//qWYWAxMDFcGoYaQDlg8fPlAtOgEAAAD//wMAjr0KqcS1riMAAAAASUVORK5CYII=) repeat-x scroll left center rgba(0, 0, 0, 0);
    height: 11px;
    width: 100%;
}

.quote-wrap {
    margin: 10px 0 60px;
    background: #f8f8f8;
    border: 1px solid #e1e1e1;
    padding: 25px 20px;
    position: relative;
}
.quote-wrap h6 {
    color: #4072b4;
    font-size: 16px;
    margin: 0 0 15px;
    text-transform: uppercase;
}
.quote-wrap p {
    color: #8a8a8a;
    font-size: 14px;
    line-height: 18px;
}
.quote-author { }
.quote-author-img {
    background: none repeat scroll 0 0 #4072b4;
    border: 1px solid #e2e2e2;
    border-radius: 50%;
    float: left;
    height: 96px;
    padding: 8px;
    position: relative;
    top: -10px;
    width: 96px;
}
.quote-author-img img {
    border: 1px solid #cecece;
    border-radius: 50%;
    height: auto;
    max-width: 100%;
    width: 88px;
}
.quote-author h5 {
    color: #000000;
    font-size: 15px;
    margin: 20px 0 -5px 115px;
}
.quote-author h5 span {
    color: #b2b2b2;
}
.quote-wrap:hover {
   ...

JavaScript

// Bootstrap v3.1.0
// Font Awesome 4.1.0