JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<body>

<script src="https://fb.me/react-with-addons-0.14.7.min.js"></script>
<script src="https://fb.me/react-dom-0.14.7.min.js"></script>
<script src="https://npmcdn.com/mobx@2.3.1/lib/mobx.umd.js"></script>
<script src="https://npmcdn.com/mobx-react@3.3.1/index.js"></script>
</body>

React

const {observable, action, computed} = mobx;
const {observer} = mobxReact;

@observer
class Country extends React.Component {
    /*
     1. Type term: 'unit'
        Results:
        - Emirates, The United Arab
        - United States
        - The United Kingdom
        SHOULD BE:
        - United States (this should be first since it starts with the term 'unit')
        - The United Kingdom (this should be second since term 'unit' occurs in the name before "Emirates, The United Arab")
        - Emirates, The United Arab
        
     2. Type term: 'in'
        Results:
        - China
        - India
        - The United Kingdom
        SHOULD BE:
        - India (this should be first since it starts with the term 'in')
        - China (this should be second since 'in' term occurs in the name before "The United Kingdom")
        - The United Kingdom
    */
  
    @observable filterTermValue = '';
    @observable countriesList = [
      {'slug': 'amsterdam', 'name': 'Amsterdam'},
      {'slug': 'china', 'name': 'China'},
      {'slug': 'uae', 'name': 'Emirates, The United Arab'},
      {'slug': 'iceland', 'name': 'Iceland'},
      {'slug': 'india', 'name': 'India'},
      {'slug': 'usa', 'name': 'United States'},
      {'slug': 'uk', 'name': 'The United Kingdom'},
      {'slug': 'vienna', 'name': 'Vienna'}
    ];

    @computed get filtered() {
      let filteredList = this.countriesList.filter(
        t=>t.name.toLowerCase().indexOf(this.filterTermValue)>-1
      );
      
      return filteredList;
    }

    render() {
        return (
          <div>
              Term: <input placeholder="Start typing country"
                 onKeyUp={this.onChangeFilterTerm} />

              {this.filtered.map(country =>
                  <div key={country.slug}>
                    <p>{country.name}</p>
                  </div>
              )}
          </div>
        )
    }


    @action onChangeFilterTerm = (e) => {
        this.filterTermValue =...