JSFiddle - React, Tailwind, and code Playground

by Kaleb Hornsby

HTML

<div class="container cover-letter">
<header class=name>
    <h1 class=name>Kaleb Hornsby</h1>
    <h2 class="tel">(706) 955-1417</h2>
    <h2 class="email">[email protected]</h2>
    <h2 class="county">Richmond Co. Pct. 206</h2>
    <h2 class="address">2104 Whitney South Dr, Augusta, GA 30904</h2>
    <p style="clear:left;float:left;">for Assistant Secretary</p>
</header>
<div class="content">
    <p style="float:right;">
        Nominations Committee<br />
        Georgia Republican Party
    </p>
    <p>Members of the Nominations Committee:</p>
    <p>
        My name is Kaleb Hornsby. I would like to inform the mebers of the nominations committee that I would like to be considered for the office of Assistant Secretary.
    </p>
    <p>Thank you for your consideration,</p>
    <p>&mdash; Kaleb Hornsby</p>
</div>
    <footer>&nbsp;</footer>
</div>
<div class="container">
    <!--h1>Political Résumé</h1-->
<header class="name">
    <h1 class="name">Kaleb Hornsby</h1>
    <h2 class="tel">(706) 955-1417</h2>
    <h2 class="email">[email protected]</h2>
    <h2 class="county">Richmond Co. Pct. 206</h2>
    <h2 class="address">2104 Whitney South Dr, Augusta, GA 30904</h2>
    <p style="clear:left;float:left;">for Assistant Secretary</p>
</header>
<div class="content">
    <div class="objective">
        <h2 class="objective">Objective: </h2>
        <p class="objective">
            Navy veteran, software engineer seeking to holde the office of Assistant
            Secretary for  Republican Committee of the State of Georgia.
        </p>
    </div>
    <h2>Political Experience:</h2>
    <h2>Richmond County Executive Committee</h2>
    <h3>09 March 2013 &ndash; Present</h3>
    <h4>Chairman, 2<sup>nd</sup> Commission District</h4>
    <p>
        Represent my fellow Republicans in the 2<sup>nd</sup> Commission
        District on the Executive Committee of the Augusta-Richmond County Republican
        Party.
    </p>
    <h2>Richmond County Precinct 206</h2>
    <h3>09...

CSS

body { font-family: ‘Trebuchet MS’, Helvetica, Arial, sans-serif; }
header.name {
    font-family:"Century Gothic";
    color:white;
    padding:1em;
    margin-bottom:1em;
    border-bottom-style:solid;
    border-bottom-width:5px;
}
header.name h1 {
    font-size:24pt;
    margin-bottom:0.5em;
    float:left;
}
header.name h2 {
    font-size:12pt !important;
    float:right;
    clear:right;
}
header.name h2::after {
    /*content: " • ";*/
}
header.name h2:last-child::after {
    /*content: "";*/
}
.container {
    position:relative;
    z-index:1;
    width:7.5in;
    height:10in;
    /*padding:20px 280px 20px 20px;
    margin:0 auto;
    color:#fcfcfc;
    background:#000;*/
    margin-left:auto;
    margin-right:auto;
}

.content h2, .content h3 {
    margin:0 0 1em;
    text-align:left;
    font-size:16pt;
    font-weight:bolder;
}
.content h2 {
    float:left;
    clear:left;
}
.content h3 {
    float:right;
}
.content {
    margin:1em;
}
.container:before {
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:url(http://1.bp.blogspot.com/-h3WLnpWEF-I/Twz0qoikLoI/AAAAAAAACAo/Ld08H_TTeH0/s1600/GOP.jpg) no-repeat;
    background-size:100%;
    opacity:0.2;
    background-position:center center;
}
.content p {
    clear:both;
    margin-bottom:1em;
}
.cover-letter p {
    margin-bottom:1em;
}
footer {
    position:absolute;
    bottom:0;
    width:100%;
    border-top:5px solid;
}
header, footer {
    height:5em;
    background-color:rgb(0,59,115);
    opacity:0.8;
    border-color:rgb(226,10,23);
}
h4 {
    clear:left;
    float:left;
    font-style:italic;
    /*font-family:Garamond, "Time New Roman", serif;*/
    font-weight:bold;
    margin-top:-1em;
    font-size:16pt;
    color:#444;
}
sup {
    font-size:.6em;
}
div.objective {
    position:relative;
    height:4em;
}
h2.objective, p.objective {
    position:absolute;
}
p.objective {
    text-indent:7em;
    margin-top:.2em;
}

JavaScript

//print();