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 {background:yellow;}

JavaScript

$(".myul").click(function(){
    $(this).addClass('active');
});