JSFiddle - React, Tailwind, and code Playground

by Nibin George

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<table style="width:100%;">
    <tr>
        <td width='200' valign="top">
                <div class="menu-item">
<table>
    <tr><td><b>Certificate Authority</b></td></tr>
<tr>
<td><label for="AlphaSSL">AlphaSSL</label></td>
<td><input id="AlphaSSL" type="checkbox" /></td>
</tr><tr>
<td><label for="Comodo">Comodo</label></td>
<td><input id="Comodo" type="checkbox" /></td>
</tr><tr>
<td><label for="GeoTrust">GeoTrust</label></td>
<td><input id="GeoTrust" type="checkbox" /></td>
</tr><tr>
<td><label for="GlobalSign">GlobalSign</label></td>
<td><input id="GlobalSign" type="checkbox" /></td>
</tr><tr>
<td><label for="RapidSSL">RapidSSL</label></td>
<td><input id="RapidSSL" type="checkbox" /></td>
</tr><tr>
<td><label for="Symantec">Symantec</label></td>
<td><input id="Symantec" type="checkbox" /></td>
</tr><tr>
<td><label for="Thawte">Thawte</label></td>
<td><input id="Thawte" type="checkbox" /></td>
</tr>
    <tr><td><b>Certificate Type</b></td></tr>
    <tr>
<td><label for="Standard">Standard</label></td>
<td><input class="certType" id="Standard" type="checkbox" /></td>
</tr><tr>
<td><label for="SAN UCC">SAN UCC</label></td>
<td><input class="certType" id="SAN UCC" type="checkbox" /></td>
</tr><tr>
<td><label for="OV">OV</label></td>
<td><input class="certType" id="OV" type="checkbox" /></td>
</tr><tr>
<td><label for="Code">Code</label></td>
<td><input class="certType" id="Code" type="checkbox" /></td>
</tr><tr>
<td><label for="Wildcard">Wildcard</label></td>
<td><input class="certType" id="Wildcard" type="checkbox" /></td>
</tr><tr>
<td><label for="EV">EV</label></td>
<td><input class="certType" id="EV" type="checkbox" /></td>
</tr>

</table>

                    
                    
                    </div>

                </td>     
        <td>
        
<article class="post AlphaSSL Standard">
	<header class="entry-header">
		<h2 class="entry-title">AlphaSSL Single...

CSS

.main_price {
color: #000000;
font-family: "trebuchet MS";
font-size: 33px;
line-height: 35px;
padding-bottom: 10px;
text-align: center;
}

article {
background: none repeat scroll 0 0 #fff;
border: 1px solid #928b68;
box-sizing: border-box;
float: left;
margin-bottom: 2%;
margin-right: 2%;
padding-bottom: 0;
width: 300px;	
}

.home_more {
background: none repeat scroll 0 0 #19569d;
text-align: center;	
}

.home_more a {
    color: #fff;
    font-family: "trebuchet MS";
    font-size: 18px;
    line-height: 40px;
}

article .post_img {
    height: 70px;
    margin-bottom: 0;
    padding: 0 0 10px;
    text-align: center;
    width: 100%;
}


article h2.entry-title {
    color: #444444;
    font-size: 14px;
    font-weight: normal;
    height: 43px;
    line-height: 20px;
    margin: 5px 10px 10px;
    overflow: hidden;
}

article .post_img img {
    height: auto;
    margin-bottom: 0;
    width: auto;
}

JavaScript

$(document).ready(function () {
    $('.post').show();

    $('.menu-item').find('input:checkbox').on('click', function () {
        var post = $('.post').hide();
        if($(this).attr("class") == "certType"){
           $('input[class="certType"]').not(this).prop('checked', false);
        }
        var elements = $('.menu-item').find('input:checked');
        
        if(elements.length){
            elements.each(function () {
                if($(this).attr("class") == "certType" && elements.length != 1){
                     $('.post:visible').filter(':not(.' + this.id + ')').hide();
                }else{
                     post.filter('.' + this.id).show();
                }
            });
        }
        else
            post.show();
    });
});