JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="pt-br">
<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">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <link rel="stylesheet" href="styles.css">
  <title>Contact List</title>
</head>
<body>
  <section class="form">
    <div class="search">
      <h1>Contact List</h1>
      <div class='search__field'>
        <input type="text" name="contact" id="contact" placeholder="Contact name" class="search__name form-control">
        <button type="button" onclick='printData()' class='btn btn-primary search__btn'>Search</button>
      </div>
    </div>
  </section>
  <section class="results">
    <ul class="cards" id="cards"></ul>
  </section>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

  <script src="script.js"></script>
</body>
</html>

CSS

section {
  width: 90%;
  margin: 30px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;  
}

section h1 {
  margin-bottom: 30px;
}

input {
  max-width: 400px;
  margin-right: 20px;
}

.search__field {
  display: flex;
}

.cards {
  list-style: none;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.card {
  background: #eee;
  border-radius: 30px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  padding: 25px 0;
  margin: 25px 7px;
  width: 280px;
}

.card__name {
  font-size: 26px;
}

.card__image {
  max-width: 150px;
  border-radius: 300px;
  margin: 0 auto;
}

.card__btn {
  width: 15 0px;
  margin: 0 auto;
  background: green;
  color: white;
  padding: 3px 10px;
  border-radius: 30px;
  border: 0;
}
.search {
  text-align: center;
}

JavaScript

async function fetchPeople() {
  const URL = 'https://randomuser.me/api/?results=10';
  const res = await fetch(URL);
  let data = await res.json();
  return data;
}

async function data(name) {
  let filteredData = [];

  if (name.length > 0) {
    let newdata = JSON.parse(localStorage.getItem('contacts'));
    filteredData = newdata.filter((contact) => {
      return contact.name.first.toLowerCase().includes(name);
    });
  } else {
    let data = await fetchPeople();
    localStorage.setItem('contacts', JSON.stringify(data.results));
    filteredData = data.results;
    return filteredData;
  }
  return filteredData;
}

async function printData() {
  let ul = document.querySelector('#cards');
  let name = document.querySelector('#contact').value.toLowerCase();
  let filteredData = [];
  
  filteredData = await data(name);
  
  filteredData.forEach((contact) => {
    let li = document.createElement('li');
    li.innerHTML = `
      <div class="card">
        <img src="${contact.picture.large}"
          alt="${contact.name.first} ${contact.name.last}"
          class="card__image">
        <h2 class="card__name">${contact.name.first}  ${contact.name.last}</h2>
        <p class="card__email">${contact.email}</p>
        <p class="card__location">${contact.location.city}-${contact.location.state}</p>
        <button class="card__btn">${contact.location.country}</button>
      </div>`;
    ul.appendChild(li);
  });
}