JSFiddle - React, Tailwind, and code Playground

by nilgundag

HTML

<div class="cf">
    <nav class="nav">
        <a href="#">ANASAYFA</a>
        <a href="#">ETKİNLİKLER</a>
        <a href="#">HAKKINDA</a>
        <a href="#">TAKVİM</a>
        <a href="#">İLETİŞİM</a>
    </nav>
</div>    
<div class="cf">
    <nav class="nav nav-tabs">
        <a href="#" class="selected">Son Yazılar</a>
        <a href="#">Blog/Arşiv</a>
        <a href="#">Kategoriler</a>
    </nav>
<div>    
    
<div class="cf">
    <nav class="nav nav-vertical nav-links">
        <h4>Bağlantılar</h4>
        <a href="#">HTML Mag</a>
        <a href="#">CSS-Tricks</a>
        <a href="#">Smashing Magazine</a>
        <a href="#">CSS Zen Garden</a>
    </nav>
</div>

CSS

/*  nav */
.nav{
    margin-top: 20px;
    border-bottom: 2px solid #E24F4F;
    float: right;
}
.nav a{
    float: left;
    padding: 10px;
    text-decoration: none;
    color: black;
}

/*  nav-vertical  */

.nav-vertical{
    display: block;
    border-bottom: 0px;
    float:none;
}

.nav-vertical a{
    float:none;
    display: block;
}

/* nav-tabs */
.nav-tabs a.selected{
    background-color: #E24F4F;
    color: white;
    border-top-left-radius : 4px;
    border-top-right-radius : 4px;
}
.nav-tabs a{
    color: #E24F4F;
}
/*  nav-links  */

.nav-links{
    border-bottom: 0px;
}

.nav-links a{
    color: #E24F4F;
    line-height: 2em;
    border-bottom: 1px dashed #ccc;
}

.nav-links a:after{
    content: " >>";
    font-size: 8px;
    padding-left: 4px;
}

/* clear-fix */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}