JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="fr"> <!--<![endif]-->
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>koskoz.Blog</title>

  <link href='http://fonts.googleapis.com/css?family=Droid+Sans|Vollkorn' rel='stylesheet'>
</head>

<body>

  <div id="container">
    <header id="header">
        <hgroup>
            <h1><a href="#">Prénom Nom</a></h1>
            <h2><a href="http://localhost/wordpress">Le blog</a></h2>
            <h2><a>lolcat</a></h2>
        </hgroup>
    </header>
  </div>
    
</body>

CSS

#container {
    width: 960px; 
    margin: 0 auto;
    overflow: hidden;
}
#header {
    position: relative;
    margin: 100px 0 65px 0;
}
#header hgroup {
    width: 320px;
}
#header h1 a:after, #header h2 a:after {
    content: "";
    display: inline-block;
    width: 100%;
}
#header h1, #header h1 a {
    font-family: 'Droid Sans', serif;
    font-size: 38px;
    text-align: justify;
    text-decoration: none;
    color: #000;
}
#header h2, #header h2 a {
    margin: 0;
    font-family: 'Vollkorn', serif;
    font-size: 100px;
    text-align: justify;
    text-decoration: none;
    color: #9f0101;
}
#header h1, #header h2 {
    /* 1em * line-height */
    margin-bottom: -1.2em;
    background-color: rgba(255, 0, 0, 0.2);
}
hgroup *:hover {
    background-color: rgba(0, 255, 0, 0.2);
}