JSFiddle - React, Tailwind, and code Playground

by MadBoy

HTML

<!-- saved from url=(0014)about:internet -->
<!DOCTYPE html>
<html>

    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <meta content="2021-02-12 21:52:18" name="revised" />
        <title></title>
        <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" as="style" type="text/css" rel="stylesheet preload prefetch" />
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
        <link href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" as="style" type="text/css" rel="stylesheet preload prefetch" />
        <link href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css" as="style" type="text/css" rel="stylesheet preload prefetch" />
        <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
        <script src="https://cdn.datatables.net/plug-ins/1.10.20/sorting/datetime-moment.js"></script>

        <script src="C:\Support\GitHub\PSWriteHTML\Resources\JS\dataTables.alphabetSearch.min.js"></script>
        <link href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css" as="style" type="text/css" rel="stylesheet preload prefetch" />
        <script src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
        <script...

CSS

div.alphabet {
                position: relative;
                display: table;
                width: 100%;
                margin-bottom: 1em;
            }

            div.alphabet span {
                display: table-cell;
                color: #3174c7;
                cursor: pointer;
                text-align: center;

            }

            div.alphabet span:hover {
                text-decoration: underline;
            }

            div.alphabet span.active {
                color: black;
            }

            div.alphabet span.empty {
                color: red;
            }

            div.alphabetInfo {
                display: block;
                position: absolute;
                background-color: #111;
                border-radius: 3px;
                color: white;
                top: 2em;
                height: 1.8em;
                padding-top: 0.4em;
                text-align: center;
                z-index: 1;
            }

JavaScript

/*! AlphabetSearch for DataTables v1.0.0
 * 2014 SpryMedia Ltd - datatables.net/license
 */

/**
 * @summary     AlphabetSearch
 * @description Show an set of alphabet buttons alongside a table providing
 *     search input options
 * @version     1.0.0
 * @file        dataTables.alphabetSearch.js
 * @author      SpryMedia Ltd (www.sprymedia.co.uk)
 * @contact     www.sprymedia.co.uk/contact
 * @copyright   Copyright 2014 SpryMedia Ltd.
 *
 * License      MIT - http://datatables.net/license/mit
 *
 * For more detailed information please see:
 *     http://datatables.net/blog/2014-09-22
 */
(function(){


    // Search function
    $.fn.dataTable.Api.register( 'alphabetSearch()', function ( searchTerm ) {
        this.iterator( 'table', function ( context ) {
            context.alphabetSearch = searchTerm;
        } );

        return this;
    } );

    // Recalculate the alphabet display for updated data
    $.fn.dataTable.Api.register( 'alphabetSearch.recalc()', function ( searchTerm ) {
        this.iterator( 'table', function ( context ) {
            draw(
                new $.fn.dataTable.Api( context ),
                $('div.alphabet', this.table().container())
            );
        } );

        return this;
    } );


    // Search plug-in
    $.fn.dataTable.ext.search.push( function ( context, searchData ) {
        // Ensure that there is a search applied to this table before running it
        if ( ! context.alphabetSearch ) {
            return true;
        }

        if ($.fn.dataTable.AlphabetSearch.caseSensitive) {
            if ( searchData[$.fn.dataTable.AlphabetSearch.column].charAt(0) === context.alphabetSearch ) {
                return true;
            }
        } else {
            if ( searchData[$.fn.dataTable.AlphabetSearch.column].charAt(0).toUpperCase() === context.alphabetSearch ) {
                return true;
            }
        }

        return false;
    } );


    // Private support methods
    function bin ( data ) {
 ...