JSFiddle - React, Tailwind, and code Playground

by Hidayat Rifan

HTML

<div class="widget Label" id="Label1" style='width:310px;margin:0 auto'>
    
<h2>Label</h2>

    <div class="widget-content list-label-widget-content">
        <ul>
            <li>
<a dir="ltr" href="http://obesitystrike.blogspot.com/search/label/Blogger?max-results=12" title="Blogger">
Blogger
<span class="count" dir="ltr">22</span>
</a>

            </li>
            <li>
<a dir="ltr" href="http://obesitystrike.blogspot.com/search/label/CSS?max-results=12" title="CSS">
CSS
<span class="count" dir="ltr">3</span>
</a>

            </li>
            <li>
<a dir="ltr" href="http://obesitystrike.blogspot.com/search/label/Javascript?max-results=12" title="Javascript">
Javascript
<span class="count" dir="ltr">8</span>
</a>

            </li>
            <li>
<a dir="ltr" href="http://obesitystrike.blogspot.com/search/label/JQuery?max-results=12" title="JQuery">
JQery
<span class="count" dir="ltr">9</span>
</a>

            </li>
            <li>
<a dir="ltr" href="http://obesitystrike.blogspot.com/search/label/Komentar?max-results=12" title="Komentar">
Komentar
<span class="count" dir="ltr">4</span>
</a>

            </li>
            <li>
<a dir="ltr" href="http://obesitystrike.blogspot.com/search/label/Lain%20Lain?max-results=12" title="Lain Lain">
Lain Lain
<span class="count" dir="ltr">1</span>
</a>

            </li>
            <li>
<a dir="ltr" href="http://obesitystrike.blogspot.com/search/label/Navigasi?max-results=12" title="Navigasi">
Navigasi
<span class="count" dir="ltr">2</span>
</a>

            </li>
            <li>
<a dir="ltr" href="http://obesitystrike.blogspot.com/search/label/Posting?max-results=12" title="Posting">
Posting
<span class="count" dir="ltr">5</span>
</a>

            </li>
            <li>
<a dir="ltr" href="http://obesitystrike.blogspot.com/search/label/Template?max-results=12" title="Template">
Template
<span class="count" dir="ltr">4</span>
</a>

            </li>
            <li>
<a dir="ltr"...

CSS

body {
    color: #000;
    background-color:#FFF;
    font: 14px/175% Helvetica, Arial, sans-serif
}
.Label .on {
    background-color:#48C9B0
}
.Label h2 {
    position:relative;
    padding: 10px 39px 10px 15px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    border: medium none;
    border-radius: 4px;
    color: #FFF;
    background-color: #1ABC9C;
    display: block;
    cursor:pointer;
    margin:10px 0
}
.Label h2:after {
    content:"";
    border-width: 8px;
    border-color: #fff transparent transparent;
    border-style: solid;
    position: absolute;
    right: 15px;
    top: 17px
}
h2.on:after {
    border-color: transparent transparent #fff;
    top: 8px
}
.Label .count {
    display: block;
    float: right;
    min-width: 25px;
    text-align: center;
    border-radius: 2px;
    background-color:#D6DBDF
}
.Label li:hover .count, .actived .count {
    color: #FFF;
    background-color: #1ABC9C;
}
.list-label-widget-content {
    border-radius: 4px;
    background-color: #F3F4F5;
    display:none
}
.Label ul, .Label li {
    padding: 0px;
    margin: 0px;
    list-style: outside none none;
}
.Label ul {
    border-radius: 4px;
    overflow:hidden
}
.Label li a {
    padding:10px;
    color: rgba(52, 73, 94, 0.85);
    display:block;
    font-size: 14px;
    text-decoration:none
}
.Label li a:hover, .Label .actived {
    color: inherit;
    background-color: #E1E4E7;
    text-decoration:none
}

JavaScript

$(function () {
    $('.Label h2').on("click", function (t) {
        $(this).toggleClass("on").next().slideToggle(200);
        t.stopPropagation()
    });
    $(document.body).on("click", function () {
        $('.Label').find(".on").removeClass("on").next().slideUp(200);
    });
});