JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<ul class="tabs-list">
    <li class="selected">Tab</li>
    <li class="ripple-1">Tab</li>
    <li class="ripple-2">Tab</li>
    <li class="ripple-3">Tab</li>
    <li class="ripple-4">Tab</li>
    <li class="ripple-5">Tab</li>
    <li class="ripple-6">Tab</li>
</ul>

SCSS

*{
    box-sizing: border-box;
}

body{
    font-family: sans-serif;
    color: #353535;
}

ul.tabs-list{
    margin: 0;
    padding: 0;
    width: 100%;
    display: table;
    
    & > li{
        background-color: #eee;
        list-style-type: none;
        padding: 8px;
        display: table-cell;
        text-align: center;
        cursor: pointer;
        border-bottom: 3px solid rgba(#FF7E00, 0);
        transition: color 300ms, background-color 300ms, border 300ms;
        
        &:hover,
        &:focus{
            border-bottom-color: #FF7E00;
        }
        
        &.selected{
            background-color: #FF7E00;
            color: #fff;
            border-bottom-color: #FF7E00;
        }
        
        $ripple-count: 6;
        $ripple-max-modifier: 15%;
        $i: 0;
        @while $i < $ripple-count{
            $i: $i+1;
            &.ripple-#{$i}{
                background-color: darken(#eee, ($ripple-max-modifier / $i));
            }
        }
    }
    
}

JavaScript

/**
 * Tab ripple
 */