JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha256-3dkvEK0WLHRJ7/Csr0BZjAWxERc5WH7bdeUya2aXxdU= sha512-+L4yy6FRcDGbXJ9mPG8MT/3UCDzwR9gPeyFNMCtInsol++5m3bk2bXWKdZjvybmohrAsn3Ua5x8gfLnbE1YkOg==" crossorigin="anonymous">

<input type="text" class="saveicons"/>
<input class="chooseicon" text="choose icon" type="submit" />

<div class="iconpicker">
<input type="text" class="srchicons" placeholder="eg:google"/>
</div>

CSS

body{
  background:#fff;
}
.iconpicker{
  border:1px solid #ccc;
  background:#efefef;
  width:260px;
  height:300px;
  overflow:auto;
  display:none;
}
.iconpicker .geticonval{
  background:#fcfcfc;
  border:1px solid #ccc;
  padding:10px;
  border-radius:3px;
  margin:10px;
  
}
.iconpicker .geticonval:hover{
background:#efefef;
cursor:pointer;
}
.iconpicker .geticonval:active{
background:#ccc;
}
.iconpicker .geticonval .fa{
font-size:30px;
margin-right:10px;
}
.srchicons{
  margin:10px;
  border:1px solid #ccc;
  padding:10px;
  border-radius:3px;
  width:200px;
}

JavaScript

var words = 'fa-500px fa-adjust fa-adn fa-align-center fa-align-justify fa-align-left fa-align-right fa-amazon fa-ambulance fa-american-sign-language-interpreting fa-anchor fa-android fa-angellist fa-angle-double-down fa-angle-double-left fa-angle-double-right fa-angle-double-up fa-angle-down fa-angle-left fa-angle-right fa-angle-up fa-apple fa-archive fa-area-chart fa-arrow-circle-down fa-arrow-circle-left fa-arrow-circle-o-down fa-arrow-circle-o-left fa-arrow-circle-o-right fa-arrow-circle-o-up fa-arrow-circle-right fa-arrow-circle-up fa-arrow-down fa-arrow-left fa-arrow-right fa-arrow-up fa-arrows fa-arrows-alt fa-arrows-h fa-arrows-v fa-asl-interpreting fa-assistive-listening-systems fa-asterisk fa-at fa-audio-description fa-automobile fa-backward fa-balance-scale fa-ban fa-bank fa-bar-chart fa-bar-chart-o fa-barcode fa-bars fa-battery-0 fa-battery-1 fa-battery-2 fa-battery-3 fa-battery-4 fa-battery-empty fa-battery-full fa-battery-half fa-battery-quarter fa-battery-three-quarters fa-bed fa-beer fa-behance fa-behance-square fa-bell fa-bell-o fa-bell-slash fa-bell-slash-o fa-bicycle fa-binoculars fa-birthday-cake fa-bitbucket fa-bitbucket-square fa-bitcoin fa-black-tie fa-blind fa-bluetooth fa-bluetooth-b fa-bold fa-bolt fa-bomb fa-book fa-bookmark fa-bookmark-o fa-braille fa-briefcase fa-btc fa-bug fa-building fa-building-o fa-bullhorn fa-bullseye fa-bus fa-buysellads fa-cab fa-calculator fa-calendar fa-calendar-check-o fa-calendar-minus-o fa-calendar-o fa-calendar-plus-o fa-calendar-times-o fa-camera fa-camera-retro fa-car fa-caret-down fa-caret-left fa-caret-right fa-caret-square-o-down fa-caret-square-o-left fa-caret-square-o-right fa-caret-square-o-up fa-caret-up fa-cart-arrow-down fa-cart-plus fa-cc fa-cc-amex fa-cc-diners-club fa-cc-discover fa-cc-jcb fa-cc-mastercard fa-cc-paypal fa-cc-stripe fa-cc-visa fa-certificate fa-chain fa-chain-broken fa-check fa-check-circle fa-check-circle-o fa-check-square fa-check-square-o fa-chevron-circle-down...