JSFiddle - React, Tailwind, and code Playground

Better Headers

by Jennifer Perrin

HTML

<h2>Mollit non sirloin salami cupim tenderloin exercitation turducken fatback duis landjaeger cupidatat id chuck.</h2>
<p>Mollit non sirloin salami, cupim tenderloin exercitation turducken fatback duis landjaeger cupidatat id chuck. In brisket leberkas veniam nisi chuck venison. Pastrami ground round pork chop shoulder.</p>

<h3>Tongue laborum ham hock biltong</h3>
<p>Ea irure incididunt, chicken sausage eu ut beef pig esse t-bone. Est doner in bresaola. Tongue laborum ham hock biltong, filet mignon chuck lorem shank reprehenderit capicola elit non. Consectetur swine landjaeger ham hock lorem meatloaf.</p>

<h5>Brisket leberkas veniam nisi chuck venison.</h5>
<p>In brisket leberkas veniam nisi chuck venison. Pastrami ground round pork chop shoulder. Mollit non sirloin salami, cupim tenderloin exercitation turducken fatback duis landjaeger cupidatat id chuck.</p>

CSS

@import url(http://fonts.googleapis.com/css?family=Muli);
html, body { font-family: 'Muli', sans-serif; }

body {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    color: #555555;
    background: #ffffff;
}


.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: inherit;
    font-family: 'Muli', sans-serif;
    font-weight: 300;
    line-height: 1.1;
}

h2 {
    display: block;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 8px;
    color: #505050;
    line-height: 1.2;
    position: relative;
    font-size: 26px;
	font-weight: 400;
    text-transform: uppercase;
}
    h2:after {
        position: absolute;
        content: "";
        bottom: -2px;
        left: 0;
        width: 35%;
        border-top: 2px solid #f86d18;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }
        h2:hover:after { width: 75%; }

h3 {
    display: block;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 8px;
    color: #505050;
    line-height: 1.2;
    position: relative;
    font-size: 20px;
	font-weight: 400;
    text-transform: uppercase;
}
    h3:after {
        position: absolute;
        content: "";
        bottom: -2px;
        left: 0;
        width: 35%;
        border-top: 2px solid #f86d18;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }
        h3:hover:after { width: 75%; }

h5 {
    display: block;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 8px;
    color: #505050;
    line-height: 1.2;
    position: relative;
    font-size: 16px;
	font-weight: 400;
    text-transform: uppercase;
}
    h5:after {
        position: absolute;
        content: "";
        bottom: -2px;
        left: 0;
        width: 35%;
        border-top: 2px solid #f86d18;
       ...