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 class="overdue">
                <a href="#">
                    <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;
}

$content-width: 930px;

a {
    text-decoration: none;
}

.base-panel {
    margin: 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding: 0;
    
    .amount {
        font-weight: bold;
        font-size: 24px;
        color: #048FC2;
    }
    
    &.overdue .amount,
    .overdue .amount {
        color: #c00;
    }
    
    .label {
        font-size: 12px;
        color: #888;
    }
}
 
.base-list-sizing {
    ul:before,
    ul:after {
        content: " ";
        display: table;
    }
        
    ul:after {
        clear: both;
    }
    
    li {
        float: left;
    }
    
    &.two li {
        width: ($content-width / 2) - 2;   
    }
    
    &.three li {
        width: ($content-width / 3) - 2;
    }
    
    &.four li {
        width: ($content-width / 4) - 2;
    }
}

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

.x-tabs.dashboard {
    @extend .base-list-sizing;
    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 {
                display: block;
                padding: 6px 0;
                
                & > .x-tab-center {
                    margin: 6px 0;
                    padding: 3px 0;
                }
            }    
            
            .x-tab-center {
                display: block;
                padding: 7px 0;
                
                & > span {
                    display: block;
                    text-align: center;
               }
            }            
            
            &.selected...