JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<div class="flowers-wrap">
            
 <h3 style="font-size:14px; font-weight:normal;">Available Flowers</h3>
 <p style="font-size:12px;"><strong>Filter flowers by colour:</strong></p>
 <form>
   <label style="font-size:12px;"><input type="checkbox" id="red" /> Red</label><br>
   <label style="font-size:12px;"><input type="checkbox" id="yellow" /> Yellow</label><br> 
   <label style="font-size:12px;"><input type="checkbox" id="pink" /> Pink</label><br>                     
   <label style="font-size:12px;"><input type="checkbox" id="purple" /> Purple</label><br>
   <label style="font-size:12px;"><input type="checkbox" id="green" /> Green</label><br>  
   <label style="font-size:12px;"><input type="checkbox" id="other" /> Other</label>
</form>
<p style="font-size:12px;"><strong>Filter flowers by size:</strong></p>
 <form>
   <label style="font-size:12px;"><input type="checkbox" id="tiny" /> Tiny</label><br>
   <label style="font-size:12px;"><input type="checkbox" id="small" /> Small</label><br>
   <label style="font-size:12px;"><input type="checkbox" id="medium" /> Medium</label><br>                  
   <label style="font-size:12px;"><input type="checkbox" id="large" /> Large</label><br>
   <label style="font-size:12px;"><input type="checkbox" id="giant" /> Giant</label>
</form>                
</div>
            
<div class="continents-wrap">
   <h3 style="font-size:14px; font-weight:normal;">Available Continents</h3>
                
    <div class="continents" style="font-size:12px;">
          <div>Africa <input type="checkbox" id="africa" /></div>
          <div>Europe <input type="checkbox" id="europe" /></div>
          <div>Asia <input type="checkbox" id="asia" /></div>
          <div>North America <input type="checkbox" id="north-america" /></div>
          <div>South America <input type="checkbox" id="south-america" /></div>
          <div>Antarctica <input type="checkbox" id="antarctica" /></div>    
          <div>Australasia <input type="checkbox"...

CSS

body { font-family:'Arial'; color:#646464; }		
	.continents-wrap { float:left; width:20%; margin:0 5% 0 0; padding:0; }		
	.flowers-wrap { float:left; width:20%; margin:0 5% 0 0; padding:0; position:relative; }	
	.flowers { float:left; width:50%; }
	.flowers div { float:left; width:90%; height:68px; line-height:68px; padding:0 5%; background:#eee; margin:0 0 1px; position:relative; }

JavaScript

$('.flowers-wrap, .continents-wrap').delegate('input[type=checkbox]', 'change', function() {
					var $lis = $('.flowers > div'),
						$checked = $('input:checked');	
					if ($checked.length) {							
                        var selector = '';
                        $($checked).each(function(index, element){
							if(selector === '') {
								selector += "[data-category~='" + element.id + "']";                  
							} else {
								selector += ",[data-category~='" + element.id + "']";
							}
                        });                        
						$lis.hide(); 
                        console.log(selector);
						$('.flowers > div').hide().filter(selector).show();			   
					} else {
						$lis.show();
					}
				});