JSFiddle - React, Tailwind, and code Playground

by igalst

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;
}

p {
    font-size: 17px;
}

section p {
    width: 115%;
}

a {
    font-size: 115%;
}