JSFiddle - React, Tailwind, and code Playground

Another Heading Style

by Jennifer Perrin

HTML

<h1><span>Heading 1 Title</span></h1>
<h2><span>Heading 2 Title</span></h2>
<h3><span>Heading 3 Title</span></h3>
<h4><span>Heading 4 Title</span></h4>

<h2><span>Heading 2 Title with a really really long string of text - Yup it breaks</span></h2>

CSS

@import url(http://fonts.googleapis.com/css?family=Muli:300,400,700);

html, body { font-family: 'Muli', sans-serif; }
body { margin: 20px 20px 0; }

h1 { font-size: 30px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }

h1, h2, h3, h4 {
    background: rgba(0, 0, 0, 0) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnPgogIDxyZWN0IHdpZHRoPSc1JyBoZWlnaHQ9JzUnIGZpbGw9J3doaXRlJy8+CiAgPHBhdGggZD0nTTAgNUw1IDBaTTYgNEw0IDZaTS0xIDFMMSAtMVonIHN0cm9rZT0nIzg4OCcgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPg==") repeat scroll 0 0;
    font-weight: 300;
    letter-spacing: 2px;
    margin: 0 0 20px;
    text-transform: uppercase;
    border: 1px solid #e3e3e3;
    border-left: 0;
    padding: 1px 0;
}
    h1 span, h2 span, h3 span, h4 span {
        background: #ffffff none repeat scroll 0 0;
        padding: 1px 10px;
        border: 1px solid #e3e3e3;
        border-right: 0;
    }