JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dictionary</title>
  <!-- css -->
  <link rel="stylesheet" href="./styles.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
</head>
<body>
  <section class="content">
    <form class="form">
      <input type="text" class="form-input" placeholder="search dictionary" />
      <button type="submit" class="submit-btn">search</button>
    </form>
    <div class="details">
      
    </div>
  </section>
  <script type="module" src="./app.js"></script>
</body>
</html>

CSS

body {
  background-color: pink;
  font-family: 'Poppins', sans-serif;
}
.content {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  float: left;
  border-radius: 10px;
  width: 80%;
  padding: 50px 0;
  background-color: #ffffff;
}

.form {
  padding: 0 50px;
}

.form-input {
  height: 40px;
  min-width: 78%;
  padding: 0;
  border: none;
}

.submit-btn {
  width: 20%;
  height: 40px;
  border: none;
  border-radius: 4px;
}

.result {
  padding: 0 50px;
}

.word {
  font-size: 26px;
}

JavaScript

const url = "https://api.dictionaryapi.dev/api/v2/entries/en/";
const form = document.querySelector('.form');
const input = document.querySelector('.form-input');
const content = document.querySelector('.content');
const details = document.querySelector('.details');


const fetchData = async () => {
  let inputWord = document.querySelector('.form-input').value;
  try {
    const response = await fetch(`${url}${inputWord}`);
    const data = await response.json();
    console.log(data);
    return data;
  } catch (error) {
    details.innerHTML = 'This word is not in the dictionary.';
  }
};

const displayData = async (entry) => {
  const word = entry[0].word;
  const grammar = entry[0].meanings[0].partOfSpeech;
  const definition = entry[0].meanings[0].definitions[0].definition;
  const example = entry[0].meanings[0].definitions[0].example || '';
  details.innerHTML = ` 
    <article class="result">
      <p class="word">${word}</p>
      <p class="grammar">${grammar}</p>
      <p class="definition">${definition}</p>
      <p class="example">${example}</p>
    </article>
  `;
};


form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const data = await fetchData(url);
  displayData(data);
});