JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<body id="top">
    <div class="container-fluid">
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header page-scroll">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand scroller" href="index.php">
                        Crawlers
                    </a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                       <!--  <li class="hidden active">
                           <a href="#page-top" class = "scroller"></a>
                       </li> -->
                        <!-- <li class="page-scroll">
                            <a href="./manage.php" class = "scroller">Manage Credentials</a>
                        </li> -->
                       <!--  <li class="page-scroll">
                           <a href="./scraperFront.php" class = "scroller">Scraper</a>-->
                       </li>
                       <li class="page-scroll">
                        <a href="./management.php" class = "scroller">Password Manager</a>
                                            </li> 
                 </ul>
             </div>
             <!-- /.navbar-collapse -->
         </div>
         <!--...

CSS

<style>

        .column{
            padding-top: 10px;
            font-weight: 700;
            font-size: 16px;
        }

        #top{
            margin-top: 80px;
        }
        .nav>li>a, .navbar-brand{
            color: #ffffff !important;
        }
        .navbar-default{
            background-image: none !important;
            background-color: rgba(34, 34, 34, 0.47) !important;

        }
        .version{
        	color: #FF9627;
            font-weight: 700;
        }
    </style>

JavaScript

var $divs = $(".container.column");

    $(document).ready(function () {
        var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
            return $(a).find("a:first").text().toLowerCase().localeCompare($(b).find("a:first").text().toLowerCase());           
        });
        $("#container").html(alphabeticallyOrderedDivs);
    });