JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="pt-br">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Test Font</title>
        <!-- Link para Icon Fontes Externos -->
        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    </head>
    
    <body>
        <header> <i class="fa fa-search"></i>

             <h1 class="logo">Sample Sample</h1>
 <i class="fa fa-bars"></i>

        </header>
    </body>

</html>

CSS

* {
     padding: 0;
     margin: 0;
 }
 body {
     font-family: arial, helvetica, freesans, sans-serif;
     font-style: normal;
 }
 header {
     height: 70px;
     line-height: 70px;
     background: #674323;
     color: white;
     font-size: 1.3em;
 }
 header .logo {
     text-align: center;
     display: inline-block;
     margin: 0 auto;
     text-shadow: 1px 1px 1px black;
 }
 .fa-search {
     font-size: 1.58em;
     text-align: left;
     margin-left: 20px;
 }
 .fa-bars {
     position: absolute;
     right: 20px;
     top: 15px;
     display: inline-block;
     font-size: 1.8em;
     text-align: right;
     margin-right: 20px;
     border-radius: 10px;
     background: white;
     color: #674323;
     padding: 2px 5px 1px 5px;
     box-size: border-box;
 }