CSS3 Tabs

HTML

<section class="tab-area tabs-checked">
    <input type="radio" class="tab-A hide" name="tab" id="tab-A">
    <input type="radio" class="tab-B hide" name="tab" id="tab-B">
    <input type="radio" class="tab-C hide" name="tab" id="tab-C">

    <table>
        <tbody>
            <tr>
                <td>
                    <label class="tab-link" for="tab-A">
                        Tab A
                        <div class="count">(0)</div>
                    </label>
                </td>
                <td>
                    <label class="tab-link" for="tab-B">
                        Tab B
                        <div class="count">(0)</div>
                    </label>
                </td>
            </tr>
        </tbody>
    </table>

    <article class="main results tab blue">
        <div class="noResults">
            <div class="center-parent">
                <div class="center-child">
                    <div class="center-child-text">
                        TAB A
                    </div>
                </div>
            </div>
        </div>
    </article>
    <article class="main results tab red">
        <div class="noResults">
            <div class="center-parent">
                <div class="center-child">
                    <div class="center-child-text">
                        TAB B
                    </div>
                </div>
            </div>
        </div>
    </article>
</section>

CSS

.tabs-checked input:nth-of-type(2):not(:checked) ~ input:nth-of-type(3):not(:checked) ~ .tab:nth-of-type(1),
.tabs-checked input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
.tabs-checked input:nth-of-type(3):checked ~ .tab:nth-of-type(3)
{
    display: block;
}
.tab-link {
    text-transform: uppercase;
    font-size: 10px;
    cursor: pointer;
    color: #555;
    font-weight: bold;
    text-decoration: none;
    display: block;
    padding: 10px 10px;
    margin-bottom: -1px;
    text-align: center;
    background: #cbcbcb;
    border: 1px solid #e3e3e3;
    border-left: none;
    border-bottom: white;
}
.tab-link:hover {
    background: #eee;
}
.tab-link:first-of-type {
	border-left: 1px solid #e3e3e3;
	border-top-left-radius: 2px;
	-moz-border-radius-topleft: 6px;
	-webkit-border-top-left-radius: 2px;
}
.tab-link:last-of-type {
	border-top-right-radius: 2px;
	-moz-border-radius-topright: 6px;
	-webkit-border-top-right-radius: 2px;
}
.tab-link:hover {
    color: #666;
}
.tab {
    clear: both;
    display: none;
}
.tab-area {
    width: 100%;
    margin: 0 0 5%;
    float: left;
}
.tab-C:checked ~ table tr td:nth-of-type(3) .tab-link,
.tab-B:checked ~ table tr td:nth-of-type(2) .tab-link,
.tab-B:not(:checked) ~ .tab-C:not(:checked) ~ table tr td:nth-of-type(1) label {
    background: white;
    border-bottom: none;
}
.tab-C:checked ~ table tr td:nth-of-type(3) .tab-link:after,
.tab-B:checked ~ table tr td:nth-of-type(2) .tab-link:after,
.tab-B:not(:checked) ~ .tab-C:not(:checked) ~ table tr td:nth-of-type(1) label:after {
    position: absolute;
    content: "";
    margin: 5px 0 0 0;
    height: 1px;
    display: block;
    background: #ddd;
}
.tab-area table {
    position: relative;
}
.hide {
    display: none;
}
.main {
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 2px;
	line-height: 1.2;
	margin: 0 auto;
	padding: 24px;
}
.blue {
    background-color: lightblue;
}
.red {
    background-color: red;
}

JavaScript

// CSS3 Tabs