JSFiddle - React, Tailwind, and code Playground

by lsubirana

HTML

<link rel="stylesheet" href="http://edit.dialogic.com/src/css/grid.css">
<link rel="stylesheet" href="http://edit.dialogic.com/src/css/tn.css">
<link rel="stylesheet" href="http://edit.dialogic.com/static/fonts/style.css">



<div class="tiles">
    
		
    <div class="row trends">
        <div class="tile col5" style="height: 0px; z-index: 1;"></div><!-- tile -->
<div class="tile col7 black" data-anims="simple" style="z-index: 1;">
  <div class="tile_frame" style="top: 0px; left: 0px; width: 100%;">
	<div class="tile_content">
	  
			  
		<div class="tile_details">
			<h1>title</h1>
            <p><br />
</p>
<p>nbsp;Our products are robustly designed to exceed the most demanding needs of any-to-any connectivity across multi-generational networks.</p>
            <p><br />
</p>
<p>Feel free to browse the entire portfolio by clicking on a specific tile and learning more as you do.</p>
            <div><br />
</div>
            <p><br />
</p>
			
		</div>
	</div><!-- content -->
  </div><!-- frame -->
</div><!-- tile -->
    </div>

    <div class="col9">&nbsp;</div>
    <div id="filter" class="col3">

    <div class="trigger">Filter By Product Category <span class="icon-arrow-down"></span></div>
    <div class="filters col3" >
                        
                        
                        

        <div class="container">
            
        </div>
    </div>

</div>
    
    <div class="row main" style="margin-bottom:30px;">
        <div class="tile col3 blue" data-cat="Media Servers" data-anims="product" style="z-index: 1;">
              <div class="tile_frame" style="top: 0px; left: 0px; width: 100%;">
<a href="/en/products/media-server-software/xms.aspx">
                <div class="tile_content">

                    <img src="/~/media/Promos/Tiles/blue/14078-bgdtile-col3-ath08-blue.jpg" alt="" width="305" height="250" />

                  <div class="tile_overlay"><span class="icon-" aria-hidden="true" style="top: auto; -webkit-transform:...

CSS

body{font-family:Arial;}
#filter{position:relative;}
.trigger{
    color: white;
    cursor: pointer;
    padding: 4px 20px;
    background-color: #0a78ab;
    font-weight:bold;
    font-size:14px;
}
.trigger .icon-arrow-down{
    font-size: 130%;
    vertical-align: middle;
}
.filters {
  /* must be initially hidden */
  display: none;
  /* place overlay on top of other elements */
  z-index: 2000;
  /* styling */
  background-color: #000;
  border: 1px solid #999;
  /*top: 24px;
  right: 0px;*/
  position: absolute;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  padding: 0;
  text-transform: none;
  }
.filters .container{
    color:white;
    font-size:15px;
}
.filters .container .grp{
    border-bottom:1px solid #999;
    padding:2px 10px;
    cursor:pointer;
}
.filters .container .grp span{
    padding: 0px 10px;
    font-size:12px;
    vertical-align: middle;
}

JavaScript

if (typeof (DIALOGIC) === 'undefined') {
    DIALOGIC = {};
}
; (function ($, window, document, undefined) {
    $.fn.tileFilter = function (options) {
        var defaults = {
            el: '#filter',
            trigger: '.trigger',
            container: '.container',
            template: '<div class="grp"><span class="icon-checkbox-checked"></span><span class="name">hello</span></div>'
        }
        $.extend(true, defaults, options);
        var $el = $(defaults.el);
        $el.find(defaults.trigger).click(function(){
            $el.find('.filters').toggle();
        });
        var categories = {};
        return this.each(function () {
            var myCategory = $(this).attr('data-cat')
            if (!categories.hasOwnProperty(myCategory)) {
                categories[myCategory] = 1;
                var $item = $(defaults.template);
                $item.find('.name').text(myCategory);
                $item.click(function () {
                    $(this).find('.icon-checkbox-checked, .icon-checkbox-unchecked').toggleClass('icon-checkbox-checked icon-checkbox-unchecked');
                    $('.tile[data-cat="' + myCategory + '"]').toggle();
                })
                .appendTo($el.find(defaults.container));
            }
        });
    }



    })(jQuery, window, document);

    $('.tile[data-cat]').tileFilter();