JSFiddle - React, Tailwind, and code Playground

by Castrolol

HTML

<script src="//jsblocks.com/jsblocks/blocks.js"></script>
<link rel="stylesheet" href="//5ddbbfa4f43f7c53e8d8085e7ad677862ce70482.googledrive.com/host/0B2CeIS17eW4jUmF2dnBWUmQ0c28/currency-icons-fill/file.css">
<script src="//castrolol.com/money-currencies.js"></script>
<link rel="stylesheet" href="//castrolol.com/money-icons.css">
<input data-query="val(filter)" placeholder="Search for a block name">
<div class="result-box" data-query="each(items.view)">
    <div class="tile" data-query="css('top', Math.floor($index() / 4) * 91).css('left', ($index() % 4) * 91)"> <span class="fa fa-{{icon}}"></span>

         <h4>{{title}}</h4>

    </div>
</div> <i class="ang"></i>

CSS

/* CSS Transitions */
/* The built-in classes shown below allow for easy CSS transitions */
.tile.b-hide-end {
    opacity: 0;
}
.tile.b-show {
    opacity: 0;
}
.tile.b-show-end {
    opacity: 1;
}


/* Other styles */
input { font-size: 16px;  padding: 12px 16px; margin-bottom: 40px;
    width: 326px;  background: #ddf4e8;  border: 1px solid #54b07e;}
.result-box {  position: relative;  text-align: center;  }
.tile {  position: absolute;  width: 86px; background-color: #3ebee3;
    height: 86px; color: #fff;  transition: 1s linear all;  }
.tile .fa {  margin-top: 20px;  font-size: 24px;  }
.tile h4 {  font-size: 14px;  margin: 15px 0;  }

/*---icons ---*/
i:before {
    font-family:"currency-icons-fill";
}
i.afn:before { content:"\e800"; }
i.all:before { content:"\e801"; }
i.ang:before { content:"\e832"; }
i.awg:before { content:"\e802"; }
i.azn:before { content:"\e803"; }
i.bam:before { content: "\e807"; }
i.bgn:before{ content: "\e80a"; }
i.bob:before { content: "\e806"; }
i.brl:before { content:"\e809"; }
i.byr:before { content:"\e804"; }
i.czk:before { content: "\e80f"; }
i.dkk:before { content: "\e810"; }
i.eur:before { content: "\e81c"; }
i.hrk:before { content: "\e80d"; }
i.ils:before { content: "\e825"; }
i.inr:before { content: "\e822"; }
i.irr:before{ content: "\e824"; }
i.jpy:before{ content: "\e857"; }
i.khr:before{ content: "\e80b"; }
i.mdk:before { content: "\e82c"; }
i.pen:before { content: "\e83b"; }
i.pln:before { content: "\e83d" ;} 
i.rub:before{  content: "\e842"; }
i.sek:before{ content: "\e84e"; }
i.thb:before{ content: "\e84d"; }
i.usd:before { content: "\e816"; }

JavaScript

/*var currencies = { ...from castrolol.com/money-currencies.js }*/

var filter = blocks.observable();

blocks.query({
  filter: filter,
  items: blocks.observable(currencies).extend('filter', function (value)  {
    return !filterVal() || ~value.country.indexOf(filter.toLowerCase());
  })
});