<div class="flex flex-col md:flex-row">
  <div x-data="pokeSearch()" x-init="fetchPokemon()" class="md:w-1/3 flex flex-col p-10">
    <div class="flex flex-row">
      <input type="text" name="pokemonSearch" x-model="pokemonSearch" class="flex w-2/3 bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 appearance-none leading-normal" />
      <button type="submit" @click="fetchPokemon()" class="flex bg-blue-500 text-white font-bold py-2 px-4 rounded" :class="[ isLoading ? 'opacity-50 cursor-not-allowed' : 'hover:bg-blue-700' ]" :disabled="isLoading">
        Search
      </button>
    </div>
    <template x-if="pokemon">
      <div class="flex flex-row pt-10">
        <div class="flex mr-4">
          <img :src="pokemon.sprites.front_default" :alt="pokemon.name" />
        </div>
        <div class="text-sm justify-center flex flex-col">
          <h3 class="text-gray-900 text-sm font-bold uppercase leading-none mb-2" x-text="pokemon.name"></h3>
          <div class="flex flex-row flex-wrap">
            <template x-for="abilityObj in pokemon.abilities" :key="abilityObj.ability.url">
              <span x-text="abilityObj.ability.name" class="flex bg-gray-200 rounded-full px-3 py-1 text-xs font-semibold text-gray-700"></span>
            </template>
          </div>
        </div>
      </div>
    </template>
  </div>
</div>
function pokeSearch() {
  return {
    pokemonSearch: "charizard",
    pokemon: null,
    isLoading: false,
    fetchPokemon() {
      this.isLoading = true;
      fetch(`https://pokeapi.co/api/v2/pokemon/${this.pokemonSearch}`)
        .then(res => res.json())
        .then(data => {
          this.isLoading = false;
          this.pokemon = data;
        });
    }
  };
}

External CSS

  1. https://cdn.jsdelivr.net/npm/tailwindcss@1.x.x/dist/tailwind.min.css

External JavaScript

  1. https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js