JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <hgroup>
        <h2><a href="#" class="title">שם האתר</a></h2>
        <h3 class="sub-title">סלוגן אתר</h3>
    </hgroup>
    <nav>
        <ul>
            <li><a href="#">קישור 1</a></li>
            <li><a href="#">קישור 2</a></li>
            <li><a href="#">קישור 3</a></li>
            <li><a href="#">קישור 4</a></li>
        </ul>
    </nav>
</header>

<section>
    <h1>כותרת כלשהי כאן</h1>
    <p>
        תוכן כלשהו כאן. תוכן כלשהו כאן. תוכן כלשהו כאן. תוכן כלשהו כאן. תוכן כלשהו כאן. תוכן כלשהו כאן. תוכן כלשהו כאן. תוכן כלשהו כאן. תוכן כלשהו כאן. תוכן כלשהו כאן. תוכן כלשהו כאן. 
    </p> 
    <p>
        תוכן כלשהו כאן. תוכן כלשהו כאן. תוכן כלשהו כאן. תוכן כלשהו כאן. תוכן כלשהו כאן. תוכן כלשהו כאן. תוכן כלשהו כאן. תוכן כלשהו כאן. תוכן כלשהו כאן. תוכן כלשהו כאן. תוכן כלשהו כאן. 
    </p> 
</section>
<aside>
    <h3>מידע נוסף</h3>
    <ul>
        <li><a href="#">קישור 1</a></li>
        <li><a href="#">קישור 2</a></li>
        <li><a href="#">קישור 3</a></li>
        <li><a href="#">קישור 4</a></li>
    </ul>
</aside>
    
<footer>
    כל הזכויות שמורות למישהו &copy; 2012
</footer>

CSS

body {
    direction: rtl;
    font-family: arial;
}

header {
    background: #FED;
    height: 120px;
}

footer {
    background: #BED;
    height: 120px;
}

section {
    float: left;
    background: #DAD;
    height: 415px;
    width: 65%;
    overflow: hidden;
}

aside {
    background: #BAD;
    height: 415px;
    width: 35%;
}

nav {
    background: #ADD;
    display: inline-block;
    margin-top: 45px;
    min-width: 50%;
}

nav ul li {
    display: inline;  
    margin-right: -2px;
}

nav ul {
    padding: 7px 2px 3px 0;
    margin: 0 3px 0 100px;
}

nav a {
    background: white;
}

hgroup {
    width: 200px;
    float: right;
}

.title {
    text-decoration: none;
    color: Black;
}

h1 {
    font-size: 25px;
}

h2 {
    font-size: 30px;
}

.sub-title {
    font-weight: bold;
}

h3 {
    font-size: 22px;
}

aside {
    padding-right: 30px;
}

footer {
    text-align: center;
    padding-top: 50px;
}

footer:after{
    display: block;
    content: ".";
    border-bottom: 1px solid white;
    width: 300px;
    margin: -20px auto;
    font-size: 18px;
}
 
p {
    font-size: 17px;
}

section p {
    width: 115%;
}

a {
    font-size: 115%;
}