JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

From:
<input id='user_response'></input>
<br>To:
<input id='user_response_2'></input>
<!-- -->
<div class='results-container' id='c1'> <span class='a-country' style='font-weight: 400'></span>

    <ol type='1'>
        <li class='a-cpi' style='font-weight: 100'></li>
        <li class='a-rent' style='font-weight: 100'></li>
        <li class='a-groceries' style='font-weight: 100'></li>
        <li class='a-entertainment' style='font-weight: 100'></li>
    </ol>
</div>
<div class='results-container' id='c2'> <span class='b-country' style='font-weight: 400'></span>

    <ol>
        <li class='b-cpi' style='font-weight: 100'></li>
        <li class='b-rent' style='font-weight: 100'></li>
        <li class='b-groceries' style='font-weight: 100'></li>
        <li class='b-entertainment' style='font-weight: 100'></li>
    </ol>
</div>

CSS

@import"http://fonts.googleapis.com/css?family=Roboto:400,100,300,500";
body {
    min-width: 500px;
}
 input {
    width: 200px;
    height: 40px;
    background-color: rgba(20, 20, 20, 0.4);
    border: none;
    outline: none;
    font-family: Roboto, Helvetica Neue, sans-serif;
    font-weight: 100;
    color: white;
    transition: all 1s ease;
    text-align: center;
    font-size: 16pt;
    margin: 0 auto;
    display: block;
}
input:hover {
    color: orange;
    background-color: rgba(20, 20, 20, 0.7);
}
body {
    font-family: Roboto, Helvetica Neue, Sans-Serif;
    font-weight: 100;
    font-size: 16pt;
    text-align: center;
    background-image: url('http://www.lavancier.com/whitenoise.png');
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
}
.results-container {
    width: 300px;
    height: auto;
    padding: 20px;
    background-color: rgba(20, 20, 20, 0.4);
    margin: 40px 20px;
    color: white;
    text-align: left;
    display: inline-block;
}
li {
    font-size: 12pt;
}
#c1, #c2 {
    opacity: 0;
}

JavaScript

country_data = {
    'countries': ["Switzerland", "Norway", "Venezuela", "Iceland", "Denmark", "Australia", "New Zealand", "Singapore", "Kuwait", "United Kingdom", "Ireland", "Luxembourg", "Finland", "France", "Belgium", "Netherlands", "Sweden", "South Korea", "Italy", "Canada", "Japan", "Israel", "Austria", "United States", "Germany", "Hong Kong", "Qatar", "Puerto Rico", "Cyprus", "Ghana", "Greece", "Malta", "Belize", "Uruguay", "Lebanon", "United Arab Emirates", "Argentina", "Zimbabwe", "Spain", "Slovenia", "Jamaica", "Costa Rica", "Russia", "Jordan", "Estonia", "Mauritius", "Mozambique", "Nigeria", "Azerbaijan", "Trinidad And Tobago", "Croatia", "Portugal", "Tanzania", "Taiwan", "Cambodia", "Bahrain", "Dominican Republic", "Latvia", "Uzbekistan", "Brazil", "Panama", "Kazakhstan", "Oman", "Uganda", "Namibia", "Palestinian Territory", "Chile", "Honduras", "Myanmar", "Lithuania", "Libya", "Slovakia", "Ethiopia", "El Salvador", "Guatemala", "Saudi Arabia", "Belarus", "Kenya", "Turkey", "Peru", "Hungary", "China", "Czech Republic", "Iraq", "Montenegro", "Nicaragua", "Thailand", "Malaysia", "South Africa", "Ecuador", "Poland", "Iran", "Bulgaria", "Serbia", "Romania", "Bosnia And Herzegovina", "Albania", "Vietnam", "Sri Lanka", "Ukraine", "Mexico", "Armenia", "Kosovo (Disputed Territory)", "Bolivia", "Philippines", "Morocco", "Georgia", "Indonesia", "Bangladesh", "Colombia", "Syria", "Macedonia", "Egypt", "Moldova", "Algeria", "Tunisia", "Pakistan", "Nepal", "India"],
        'cpi_array': [126.03, 118.59, 111.01, 102.14, 100.6, 99.32, 93.71, 93.61, 92.97, 92.19, 92.09, 91.78, 89.68, 88.37, 87.22, 85.98, 82.91, 82.9, 82.72, 81.8, 80.36, 79.29, 76.87, 76.53, 76.27, 75.23, 74, 73.5, 72.52, 71.83, 68.88, 68.81, 68.74, 68.55, 67.61, 67.16, 67.12, 65.89, 65.7, 65.15, 63.56, 62.53, 61.91, 61.38, 61.2, 60.1, 59.92, 59.4, 59.13, 59.08, 58.92, 58.22, 57.13, 57.06, 57.05, 56.17, 55.95, 55.94, 55.92, 55.33, 55.16, 54.27, 54.2, 53.9, 53.67, 53.27, 53.21, 53.06, 53.04, 52.76,...