JSFiddle - React, Tailwind, and code Playground

by Anshuman Dwibhashi

HTML

<div id="wrapper">
    <header id="header">
        <h1>Welcome to my website!</h1>
    </header>
    
    <nav id="nav">
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </nav>
    
    <section id="main">
        <article>
            <header>
                <hgroup>
                    <h1>Title</h1>
                    <h2>Sub Title</h2>
                </hgroup>
            </header>
            <p>The content of this article</p>
            <footer>
                <p>- By &lt;Your-Name&gt;</p>
            </footer>
        </article>
        <article>
            <header>
                <hgroup>
                    <h1>Title 2 </h1>
                    <h2>Sub Title2 </h2>
                </hgroup>
            </header>
            <p>The content of the second article</p>
            <footer>
                <p>- By &lt;Your-Name&gt;</p>
            </footer>
        </article>
    </section>
    
    <aside id="sidebar">
        <h4>This is the sidebar</h4>
        <p>This is some content in the sidebar.</p>
    </aside>
    
    <footer id="footer">
        <p>Copyright &copy; &lt;Your-Company&gt;</p>
    </footer>
</div>

CSS

*{
    margin:0; padding:0;    
}

h1{
    font: bold 20px "Trebuchet MS";
}

h2{
    font: bold 14px "Trebuchet MS";
}

header, section, footer, aside, nav, article, hgroup{
    display:block;
}

body{
    text-align:center;
}