JSFiddle - React, Tailwind, and code Playground

HTML

<div class="noti_wrap">
    <a href="javascript:void(0);" class="noti_off">&nbsp;</a>
    <div class="noti">notification</div>
    <div class="count">3</div>
    <div class="noti_con">
        <ul>
            <li>noti 1</li>
            <li>noti 2</li>
            <li>notification long long textnotification long long textnotification long long text</li>
        </ul>    
    </div>
</div>

CSS

.noti_wrap {
    position:relative;
    top:0;
    left:0;
    width:100px;
    height:30px;
    background-color:#5f7076;
}
.noti_wrap a {
    position:absolute;
    top:0;
    left:0;
    background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) 0 0 repeat;
    width:100%;
    height:100%;
    display:block;
    z-index:1;
    font-size:0;
}
.noti {
    position:relative;
    top:0;
    left:0;
    margin-right:30px;
    color:#fff;
    font-size:12px;
    text-align:left;
    text-indent:10px;
    line-height:30px;
}

.count {
    position:absolute;
    top:5px;
    right:5px;
    width:20px;
    height:20px;
    border-radius:10px;
    background-color:#859495;
    color:#fff;
    text-align:center;
    font-size:11px;
    font-weight:bold;
    line-height:20px;
}

.noti_con {
    position:relative;
    top:0;
    left:0;
    border:1px solid #dddddd;
    width:300px;
    height:auto !important;
    *zoom:1;
    display:none;
}

.noti_con:after {
    clear:both;
    content:" ";
    display:block;
    width:100%;
    height:0;
    overflow:hidden;
}

.noti_con ul {
    margin:0 5px;
    *zoom:1;
    padding:0;
}

.noti_con ul:after {
    display:block;
    content: " ";
    clear:both;
    width:100%;
    height:0;
    overflow:hidden;
}

.noti_con li {
    width:100%;
    font-size:12px;
    text-align:left;
    clear:both;
    margin:10px 0;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
    float:left;
    list-style-type:none;
}

JavaScript

$(document).on("click", "[class='noti_off'],[class='noti_on']", function(e) {
    if($(this).attr("class") == "noti_off") {
        $(".noti_con").show();
        $(".count").text(0);
        $(this).removeClass("noti_off").addClass("noti_on");
    } else {
        $(".noti_con").hide();
        $(this).removeClass("noti_on").addClass("noti_off");
    }
    return false;
});