JSFiddle - React, Tailwind, and code Playground

by Susanna You

HTML

<!DOCTYPE html>
<!--
Site to make
http://demo.templateworld.com/zero/in_action/solitude/
-->

<!--
Site used for reference
http://demo.templateworld.com/wordpress-theme/
-->

<title>My Page title</title>

<body>
<div id="mainWrapper">
    <div class="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Support</a></li>
            <li><a href="#">Forum</a></li>
            <li><a href="#">Development</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
    
    <!-- Solitude -->
    <div class="solitude">
        <h1>Solitude</h1>
    </div>
    
    <!-- User Login block -->
    <div class="userLogin"> 
        <h2>User Login</h2>
        <h3>Not yet a Member?<span> Register Now</span></h3>
        <input></input>
        <input></input>
        <button>Login</button>
    </div>
    
    <!-- Left Sidebar -->
    <div class="leftSidebar">
        <h2>Photo Stock</h2>
        <!-- 3 pics go here -->
        
        <h2>Quick Contact</h2>
        
    </div>
    
    <h2>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet consectetur adipisci velit..."</h2>
    
    <!--first text block//-->
    <div class="contactWrapper">
        <!--first text block//-->
        <h2>Somelines About Us</h2>
        <h3>ltrices inh endrerit ac tempor idtellus uis quam uisque</h3>
    </div>
</div>
</body>
</html>

CSS

body {
    background-image: url("http://animalspicwallpaper.com/wp-content/uploads/2013/10/Birds-13-HD-Wallpaper.jpg");
    background-color: #cccccc;
    background-repeat: no-repeat;
    background-size: 990px;
    width: 990px;
}

/* right side */
.nav {
    display: inline;
    float: right;
    width:60%;
    padding: 0;
    margin: 0 0 1em 1em;
}

.nav li {
    font-size: 10px;
    list-style: none;
    float: left;
    margin: 0 0 1em 1em;
    border-left: dotted;
}

.nav li:first-child {
    border-left: none;
}

.nav li a {
    text-decoration: none;
    padding: 2px 8px;
}

.solitude {
    font-size: 20px;
    float: right;
    width: 50%;
    padding: 0;
    margin: 0 auto;
}

.userLogin {
    float: right;
    width: 50%;
    padding: 0;
    margin: 0 0 1em 1em;
}