JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="pt">
  <head>
    <meta charset="UTF-8">
  <title>
    João da Silva - Desenvolvedor Web
  </title>
  <link rel="shortcut icon" href="imagens/favicon.png">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/site.css">
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Shadows+Into+Light">
  </head>
  <body>
    <header class="titulo-principal">
      <img class="foto-home" src="imagens/eu.jpg" alt="Foto de João da Silva">
      <h1>
        João da Silva
      </h1>
      <p class="subtitulo-principal">
        Desenvolvedor web
      </p>
  </header>
  <main>
    <section class="secao-inicio saudacao">
      <p class="saudacao">
        <span class="saudacao-inicio">
          Olá,
        </span>
        meu nome é 
        <strong>
          João da Silva
        </strong>
        
        <span class="saudacao-ultima-linha">
          e eu construo 
          <em>
            sites maravilhosos
          </em>
        </span>
      </p>
      <a class="botao-index" href="bio.html">
        Conheça mais um pouco sobre mim
      </a>
    </section>
    <section class="secao-inicio trabalhos">
      <h2>
        Trabalhos
      </h2>
      <ul>
        <li>
          <img src="imagens/bmw.png" alt="Site da BMW">
        </li>
        <li>
          <img src="imagens/ibm.png" alt="Site da IBM">
        </li>
        <li>
          <img src="imagens/uol.png" alt="Site da UOL">
        </li>
      </ul>
      <a class="botao-index" href="portfolio.html">
        Veja mais
      </a>
    </section>
    <section class="secao-inicio blog">
      <h2>
        Blog
      </h2>
      <small>
        Últimos posts
      </small>
      <ol>
        <li>
 ...

CSS

.foto-home {
    height: 10rem;
}
.saudacao p {
    color: #99A;
    line-height: 1;
    font-size: 1.5rem;
    text-align: left;
    padding: 4em 3em 3em 3em;
}
.saudacao-inicio {
    color: #889;
}
.saudacao-ultima-linha {
    text-align: right;
    display: block;
}
.saudacao strong {
    color: #000;
    font-size: 3rem;
}
.saudacao em {
    color: #851944;
    font-size: 5rem;
}
.botao-index {
    background-color: #851944;
    color: #FFF;
    border: .2em solid black;
    width: 20rem;
    display: block;
    text-align: center;
    padding: 0.5rem;
    margin: auto;
    margin-bottom: 3.5em
}
.secao-inicio h2 {
    text-transform: uppercase;
    border: solid;
    padding-bottom: 5rem;
    font-size: 3em;
}

.secao-inicio small{
    border: solid;
    padding-bottom: 5em;
}

.secao-inicio ol{
    border: solid;
    padding-bottom: 5rem;
}

.trabalhos {
    background-color: #3C1D3D;
    border-top: 0.5em solid #000;
    border-bottom: 0.5em solid #000;
}
.trabalhos h2 {
    color: #FFF;
}
.trabalhos ul {
    overflow: hidden;
    border: 0.5em solid black;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 2em
}
.trabalhos li {
    float: left;
    width: 33.333%;
}
.trabalhos img {
    width: 100%;
    display: block;
}
.blog {
    background-color: #999;
    color: #FFF;
    padding: 2rem;
    border-bottom: 10px solid #851944;
}
.blog li a {
    color: #FCF;
}
footer {
    background-color: #000;
    color: #FFF;
}
footer a {
    color: #F99;
}
main {
    width: 100%;
    padding-bottom: 0;
    float: none;
}