JSFiddle - React, Tailwind, and code Playground

HTML

<header class="container_12 grid_12 alpha omega">
    <div class="grid_12 alpha omega">
        <hgroup>
             <h1 class="main-headline">Some text</h1>

            <p class="h1-sub grid_12 alpha omega">Some text</p>
        </hgroup>
    </div>
</header>

CSS

body {
    font-family:'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: normal;
}
.main-headline {
    font-family:'Open Sans', sans-serif;
    font-size: 3.1875em;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0em;
    margin-top: 5em;
}
.h1-sub {
    font-family:'Open Sans', sans-serif;
    font-size: 1.3125em;
    font-weight: 400;
    text-align: center;
    margin-top: 0.3125em;
}
.container_12 {
    width:58.75em;
}