JSFiddle - React, Tailwind, and code Playground

by Darius Shojaei

HTML

<link rel="stylesheet" href="http://www.myorderdesk.com/Providers/206190/Files/32/style.css">
<script src="http://www.myorderdesk.com/Providers/206190/Files/32/jquery.autocomplete.js"></script>
<div class="box">   
      <div id="searchfield">
        <form>
        	
        	<!-- Change Input type to "Search" from "text" -->
        	<input type="search" name="currency" class="biginput" id="autocomplete" placeholder="Search For You Item...">
            
            
            
        </form>
      </div><!-- @end #searchfield -->
  </div><!--  @End of Box -->

CSS

body {
  background: #343d46;
  width:100%;
  margin-top:10%;
}

JavaScript

$(function(){
  var currencies = [
    { value: '00.15B', data: 'ButtHole' },
    { value: '00.2C', data: 'ALL' },
    { value: '04-002A', data: 'DZD' },
    { value: '08-010B', data: 'EUR' },
    { value: '10.01A', data: 'AOA' },
    { value: '10.1B', data: 'XCD' },
    { value: '10.3A', data: 'ARS' },
    { value: '20.01B', data: 'AMD' },
    { value: '20.01DA', data: 'AWG' },
    { value: '20.12A', data: 'AUD' },
    { value: '20.15A', data: 'AZN' },
    { value: '20.16A', data: 'BSD' },
    { value: '20.16B', data: 'BHD' },
    { value: '20.17A', data: 'BDT' },
    { value: '20.23A', data: 'BBD' },
    { value: '20.2A', data: 'BYR' },
    { value: '20.33A', data: 'BZD' },
    { value: '20.35A', data: 'XOF' },
    { value: '20.35C', data: 'BTN' },
    { value: '20.37A', data: 'BOB' },
    { value: '20.39A', data: 'BAM' },
    { value: '20.39B', data: 'BWP' },
    { value: '20.44B', data: 'BRL' },
    { value: '20.44C', data: 'BND' },
    { value: '20.44D', data: 'BGN' },
    { value: '20.44E', data: 'BIF' },
    { value: '30.12A', data: 'KHR' },
    { value: '40.10A', data: 'XAF' },
    { value: '40.10B', data: 'CAD' },
    { value: '40.10C', data: 'CVE' },
    { value: '40.10D', data: 'KYD' },
    { value: '40.1A', data: 'CLP' },
    { value: '40.1B', data: 'CNY' },
    { value: '40.4A', data: 'COP' },
    { value: '40.5B', data: 'KMF' },
    { value: '40.5C', data: 'CDF' },
    { value: '40.5D', data: 'CRC' },
    { value: '40.6A', data: 'HRK' },
    { value: '40.6B', data: 'CUC' },
    { value: '40.6C', data: 'CZK' },
    { value: '41.2A', data: 'DKK' },
    { value: '41.2B', data: 'DJF' },
    { value: '41.2C', data: 'DOP' },
    { value: '45.1B', data: 'EGP' },
    { value: '50.10A', data: 'GQE' },
    { value: '50.10C', data: 'ERN' },
    { value: '60.13A', data: 'EEK' },
    { value: '60.13C', data: 'ETB' },
    { value: '60.13D', data: 'FKP' },
    { value: '60.1A', data: 'FJD' },
    { value: '60.23D', data: 'XPF' },
    { value: '60.23E', data: 'GMD'...