JSFiddle - React, Tailwind, and code Playground

by m_raffaele

HTML

<div id="page">
    <div id="title">
        <h1>designated</h1>
    </div>
    <div id="main">
        <div id="menu">
            <h3>Portfolio</h3>
            <ul>
                <li><a href="#">Diablo III AU</a></li>
                <li><a href="#">Diablo III AU</a></li>
                <li><a href="#">Diablo III AU</a></li>
                <li><a href="#">Diablo III AU</a></li>
                <li><a href="#">Diablo III AU</a></li>
            </ul>
        </div>
        <div id="centerdisplay">
            <div class="content">
                content here
            </div>
        </div>
        <div id="info">
            <h3>Information</h3>
            <p>Welcome to the web site of one John Daly, a self-taught web designer from Brisbane, Australia.</p>
            <p>John's sites are designed in Photoshop and written in a text editor. They conform to web standards.</p>
        </div>
    </div>
</div>

CSS

/* Reset */
* { 
    margin:0;
    padding:0;
}
body {
    background:#000;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#fff;
}

#page {
    width:960px;
    margin:0 auto;
    overflow:hidden;
    padding:30px 0;
}

h1 {
    text-align:center;
    padding:0 0 30px;
    font-size:60px
}
h3 {
    font-size:30px;
    padding:0 0 10px;
}
p {
    padding:0 0 10px;
}

#menu {
    float:left;
    width:210px;
    padding:0 20px 0 0;
}

#centerdisplay {
    float:left;
    width:500px;
}
#centerdisplay .content {
    border:10px solid #fff;
    height:300px;
}

#info {
    float:left;
    width:210px;
    padding:0 0 0 20px;
}