JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<div class="x-content">
    <div class="x-panel">
        <div class="label">All</div>
        <div class="amount">99,999.00</div>
    </div>
    <div class="x-tabs dashboard four">
        <ul>
            <li class="selected"> 
                <a href="#">
                    <div class="x-tab-center">
                        <span class="label">All (72)</span>
                        <span class="amount">99,999.00</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="x-tab-center">
                        <span class="label">All (23)</span>
                        <span class="amount">99,999.00</span>
                    </div>
               </a>
            </li>
            <li>
                <a href="#">
                    <div class="x-tab-center">
                        <span class="label">Issued (45)</span>
                        <span class="amount">21,123.95</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="overdue">
                    <div class="x-tab-center">
                        <span class="label">Expired (15)</span>
                        <span class="amount">12,222.80</span>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>
<div class="x-white">
    <div class="x-content">
        <p>All I want is for Dave to be happy.</p>
        <p>Q: Should the click target be smaller for tabs that aren't selected?</p>
    </div>
</div>

SCSS

body {
    font-family: Helvetica, sans-serif;
    background-color: #eee;
    background-image: -webkit-linear-gradient(top, #efefef, #ddd);
    background-image:         linear-gradient(to bottom, #efefef, #ddd);
    color: #333;
}

a {
    color: #048fc2;
}

$content-width: 930px;

a {
    text-decoration: none;
}

.base-clearfix {
    &:before,
    &:after {
        content: " ";
        display: table;
    }
                
    &:after {
        clear: both;
    }    
}

.clearfix {
    @extend .base-clearfix;
}

.base-panel {
	a{
		&:hover{
			text-decoration:none;
		}
		&.none{
			cursor:default;
			span{
				color: #888;
			}
			&:hover {
				background-color:#fff;
			}
		}
		&.overdue{
			.amount{
				color: #cc0000;
			}
			&:hover{
				span{
					color: #cc0000;
				}
			}
			&.none {
				span {
					color: #888;
				}
				&:hover {
					span {
						color: #888;
					}
				}
			}
		}
	}
	span{
		clear:both;
		float:left;
		text-align:center;
	}
	.label{
		text-align:center;
		color: #888;
		font-size: 12px;
	}
	.amount{
		font-weight: bold;
		font-size: 24px;
	}	    
}
 
.base-panel-sizing {
    & > a,
    & > ul > li {
        float: left;
    }
	&.three a, &.three span{
		width:310px;
	}
	&.four a, &.four span{
		width:232px;
	}	
}

.x-content {
    margin: 0 auto;
    width: $content-width;
}
.x-panel {
    @extend .base-panel;
}

.x-tabs.dashboard {
    @extend .base-panel-sizing;
    @extend .base-clearfix;
    width: 100%;

    /* FIXME: going a bit overboard on the > s here, but it proves the concept */
    & > ul {
        list-style: none;
        
        & > li {
            @extend .base-panel;
            padding: 0;
            
            & > a {
                @extend .base-clearfix;
                display: block;
                
                & > .x-tab-center {
                    margin: 10px 0;
                    padding: 7px 0 0 0;
                }
            }    
            
            .x-tab-center {
               ...