JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="title">pick your design</div>
    <div class="mycolumn">
        <div class="mybtn">REFINE SEARCH</div>
        <div class="inmycolumn">sort by theme
            <ul class="myul">
                <li>MODERN WEDDING INVITATIONS</li>
                <li>DAMASK WEDDING INVITATIONS</li>
                <li>CALLIGRAPHY WEDDING INVITATIONS</li>
                <li>VINTAGE WEDDING INVITATIONS</li>
                <li>...</li>
                <li>FALL WEDDING INVITATIONS</li>
                <li>WINTER WEDDING INVITATIONS</li>
            </ul>sort by color
            <ul class="myul">
                <li>BLACK WEDDING INVITATIONS</li>
                <li>WHITE WEDDING INVITATIONS</li>
                <li>RED WEDDING INVITATIONS</li>
                <li>ORANGE WEDDING INVITATIONS</li>
                <li>YELLOW WEDDING INVITATIONS</li>
                <li>GREEN WEDDING INVITATIONS</li>
                <li>BLUE WEDDING INVITATIONS</li>
                <li>PURPLE WEDDING INVITATIONS</li>
                <li>SILVER WEDDING INVITATIONS</li>
                <li>GOLD WEDDING INVITATIONS</li>
            </ul>sort by size
            <ul class="myul">
                <li>5 X 7</li>
                <li>6 X 6</li>
            </ul>sort by style
            <ul class="myul">
                <li>FLAT PANEL - NO ACCENT LAYERS</li>
                <li>FLAT PANEL - 1 ACCENT LAYERS</li>
                <li>FLAT PANEL - 2 ACCENT LAYERS</li>
                <li>POCKETFOLD - NO ACCENT LAYERS</li>
                <li>POCKETFOLD - 1 ACCENT LAYERS</li>
            </ul>sort by name</div>
    </div>
</body>

CSS

.title {
    color:white;
    background:#888888;
    text-align:right;
    line-height:35px;
    padding-right:25px;
    margin-bottom:25px;
    font-family: Oswald;
    cursor:default;
}
.mycolumn {
    float:left;
    background:#C0C0C0;
    text-align:center;
    width:200px;
    padding-top:40px;
    font-family: Oswald;
    cursor:default;
}
.mybtn {
    line-height:56px;
    color:white;
    background:black;
    cursor:pointer;
    font-family: Oswald;
    font-size:20px;
    margin-bottom:15px;
    font-weight:300;
}
.inmycolumn {
    width:180px;
    text-align:left;
    margin-left:10px;
    cursor:default;
    font-weight:300;
}
.myul {
    text-align:center;
    list-style:none;
    padding:0px;
}
.myul li {
    background:#D8D8D8;
    line-height:25px;
    margin-bottom:3px;
    cursor:pointer;
}
.active {
    color:white;
    background:gray !important;
}

JavaScript

$(".myul li").click(function () {
    if ($(this).attr('class') != 'active') {
        $(this).addClass('active');
    } else {
        $(this).removeClass('active');    
    }
});

$(".mybtn").click(function () {
    var text = '';
$("[class = active]").each(function(i, e) {
    text += $(e).text()+'; ';
});
    alert('Your Choose: '+text);
});