JSFiddle - React, Tailwind, and code Playground

by Hendra Nucleo

HTML

<div class="wrapper">
        <h1>Letter Based Navigation: Countries of the World</h1>
        <div class="alphabet">
            <a class="first" href="#">A</a>
            <a href="#">B</a>
            <a href="#">C</a>
            <a href="#">D</a>
            <a href="#">E</a>
            <a href="#">F</a>
            <a href="#">G</a>
            <a href="#">H</a>
            <a href="#">I</a>
            <a href="#">J</a>
            <a href="#">K</a>
            <a href="#">L</a>
            <a href="#">M</a>
            <a href="#">N</a>
            <a href="#">O</a>
            <a href="#">P</a>
            <a href="#">Q</a>
            <a href="#">R</a>
            <a href="#">S</a>
            <a href="#">T</a>
            <a href="#">U</a>
            <a href="#">V</a>
            <a href="#">W</a>
            <a href="#">X</a>
            <a href="#">Y</a>
            <a class="last" href="#">Z</a>
        </div>
        <div id="conutries">
            <table id="countries-table">
                <thead>
                    <tr>
                        <th>
                           Country Name
                        </th>
                        <th>
                            Country Code
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Afghanistan</td>
                        <td>AF</td>
                    </tr>
                    <tr>
                        <td>Aland Islands</td>
                        <td>AX</td>
                    </tr>
                    <tr>
                        <td>Albania</td>
                        <td>AL</td>
                    </tr>
                    <tr>
                        <td>Algeria</td>
                        <td>DZ</td>
                    </tr>
					<tr>
                        <td>Bababaabab</td>
                        <td>C</td>
                    </tr>
					<tr>
                 ...

CSS

.wrapper
{
    width: 680px;
    margin: 0 auto;
}

    .wrapper h1
    {
        color: #555;
        text-align: center;
        text-shadow: rgba(0, 0, 0, 0.15) 0px 0px 1px;
        letter-spacing: 2px;
    }

#conutries
{
    width: 650px;
    background: white;
}

.alphabet
{
    margin: 0 0 10px;
    overflow: hidden;
}

    .alphabet a, #countries-table tr
    {
        transition: background-color 0.3s ease-in-out;
        -moz-transition: background-color 0.3s ease-in-out;
        -webkit-transition: background-color 0.3s ease-in-out;
    }

    .alphabet a
    {
        width: 20px;
        float: left;
        color: #333;
        cursor: pointer;
        height: 20px;
        border: 1px solid #CCC;
        display: block;
        padding: 2px 2px;
        font-size: 14px;
        text-align: center;
        line-height: 20px;
        text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
        border-right: none;
        text-decoration: none;
        background-color: #F1F1F1;
    }

        .alphabet a.first
        {
            border-radius: 3px 0 0 3px;
        }

        .alphabet a.last
        {
            border-right: 1px solid silver;
            border-radius: 0 3px 3px 0;
        }

        .alphabet a:hover,
        .alphabet a.active
        {
            background: #FBF8E9;
            font-weight: bold;
        }

JavaScript

$(function () {
    var _alphabets = $('.alphabet > a, b');
    var _contentRows = $('#countries-table tbody tr');

    _alphabets.click(function () {      
        var _letter = $(this), _text = $(this).text(), _count = 0;

        _alphabets.removeClass("active");
        _letter.addClass("active");

        _contentRows.hide();
        _contentRows.each(function (i) {
            var _cellText = $(this).children('td').eq(0).text();
            if (RegExp('^' + _text).test(_cellText)) {
                _count += 1;
                $(this).fadeIn(1000);
            }
        });                   
    });
});