JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="style.css">
<!DOCTYPE htm>
<head>
    <title>Intro to Lorum Ipsem</title>
    
    <link rel="stylesheet" type="text/css" href="styles/style.css" />
    <link rel="stylesheet" media="print" href="styles/printer.css" />
    <meta name="description" content="All about lorum ipsem" />
    <meta name="kywords" content="HTML, lorum ipsem, " />
    <meta name="author" content="Mickey Mouse" />
    <title>My Sample Page</title>
</head>
<body>
    <header>
         <h1>All About Lorem Ipsum </h1>

         <h2>(Everything you wanted to know…and more!)</h3>
   <header>
   <div id=”history”>
<p>”Lorem Ipsum” has been used for dummy text in the typesetting industry since the 1500s.  If you can read Latin, it will actually make sense! </p>
</div>

<div id=”example”>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</body>
<footer>
  <p> Author: Mickey Mouse</p>
  <p> Copyright 2013 by Mickey Mouse </p>
</footer>
</html>

CSS

/* So the HTML5 structural tags work in older browsers */
 article, aside, figure, footer, header, nav, section {
    display: block;
}
html {
    background-color: white;
}
body {
    fontfamily: Arial, Helvetica, sans-serif;
    font-size: 87.5%;
    width: 800px;
    margin: 0 auto;
    border: 3px solid 800000;
    background-color: fffded;
}
a:focus, a:hover {
    font-style: italic;
}
header {
    border-bottom: 3px solid #800000;
    padding;
    1.5em 0:
}
header h1 {
    color: #800000;
}
header h2 {
    font-style: italic;
}
header img {
    float: left;
    padding: 0 30px;
}
historys {
    clear: left;
    padding: 0 20px;
    width: 525px;
    float right;
}
footer {
    border-top: 3px solid #800000;
    padding: 1em 0;
    clear: both;
}
footer p {
    text-align: center;
}