JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
                        <div class="notifications_wrap text-center center b-l b-r hidden-sm hidden-xs">
                            <span class="vlign"> </span>
                            <a href="#" id="notification-center" aria-haspopup="true" data-toggle="dropdown">
                                <i class="glyphicon glyphicon-bell"></i>
                                <span class="bubble "></span>
                            </a>
                            <div class="dropdown-menu notification-toggle1" role="menu" aria-labelledby="notification-center" id="notif">
                                <!-- START Notification -->
                                <div class="notification-panel">
                                    <div class="test"></div>
                                </div>
                            </div>
                        </div>

CSS

#notif{
        background-color: white;
        color: black;
    }
    
    .notification-content{
    
        text-align: left;
        padding: 10px;
        padding-right: 25px;
        border-bottom: 1px solid #ddd;
        transition: 0.4s ease;
    }
    
    .notification-content:hover{
        color: #48B0F7;
    }
    
    .notification-toggle1 {
        top: 75px;
        padding: 0;
        z-index: 9999;
        left: 100px;
        width: 250px;
}

    
    /*    > of the notification*/
    .notification-content >.ion-chevron-right:before {
        color: red;
/*            display:inline-block;*/
vertical-align: middle;
    line-height: 50%;
    width: 50px;
    height: 20px;
        
    }
    

    .notification-content>span{
        position: relative;
        left: 15px;
    }

JavaScript

function randomLength(){
                var random;
                return random = Math.floor(Math.random() * 15) + 4;
            }
            
             function randomNumOfNotifs(){
                var random;
                return random = Math.floor(Math.random() * 3) + 2;
            }
            
            function randomTextGen(){
                var random;
                return random = Math.floor(Math.random() * 30) + 1;
            }
            
        function stringGen(len){
            var text = " ";

            var charset = ["Bite", "chunks", "out","of" ,"me", "You're" ,"a", "shark" ,"and", "I'm", "swimming","My" ,"heart" ,"still" ,"thumps", "as", "I" ,"bleed","And" ,"all","your", "friends", "come" ,"sniffing","Terminator", "Slicer","Ninja", "cow", "Robot", "littlegirl"];

            for( var i=0; i < len; i++ ){
                text +=charset[randomTextGen()]+" ";
            }

            return text;
        }
            
            $(".notifications_wrap").find("a").mouseover(function(){
                $(".notification-content").remove();
                var random_i=randomNumOfNotifs();
                for(var i=0;i<random_i;i++){
                    var randromString = stringGen(randomLength());
                    var notification = $("<div class='notification-content'><i class='ion-chevron-right'></i><span class=''>"+randromString+"</span></div>");
                    $("#notif").append(notification);
                }

                $("#notif").animate({height:"show"},500);
            });