JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input id="pokemonInput">
    <button>Search</button>
</form>
<hr>
<div id="result"></div>

JavaScript

let form = document.querySelector('form');
    form.addEventListener('submit', (event)=>{
        event.preventDefault(); // stops form
        let result = document.querySelector('#result');
            result.innerHTML = '';
        let nameInput = document.querySelector('#pokemonInput');
        let nameValue = nameInput.value.toLowerCase();
        fetch(`https://pokeapi.co/api/v2/pokemon/${nameValue}`)
            .then((res)=>{
                if(res.status == 200){ return res.json() }
                else{ throw new Error(res.status) }
            })
            .then((dat)=>{console.log(0,dat); result.innerHTML = generatePokemon(dat) })
            .catch((err)=>{console.log(1,err); result.innerHTML = 'Unknown Pokemon'; })
    });

function generatePokemon(pokemon){
  console.log(pokemon); // check dev tools for all the info
  return `
        <table>
            <tbody>
                <tr><td>Name:</td><td>${pokemon.name}</td></tr>
                <tr><td>Height:</td><td>${pokemon.height}</td></tr>
                <tr><td>Weight:</td><td>${pokemon.weight}</td></tr>
            </tbody>
        </table>
        `;
}