JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zip Code Finder</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <link rel="stylesheet" href="Css/cep.css">
</head>
<body>
    <form class="box-cep">
        <h1>Zip Code Search</h1>
        <input type="text" name="cep" id="cep" placeholder="Digite o cep">
        <button class="btn" type="submit" id="search-cep">Buscar</button>
        <div class="container">
            <p id="rua">Street:<span id="rua-val">---</span></p>
            <p id="bairro">Neighborhood:<span id="bairro-val">---</span></p>
            <p id="cidade">Cidade:<span id="cidade-val">---</span></p>
            <p id="estado">State:<span id="estado-val">---</span></p>
        </div>
    </form>
    <script src="JavaScript/cep.js"></script>
</body>
</html>

CSS

@font-face {
  font-family: 'roboto';
  src: url(../Font/Robot-Regular.ttf);
}
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'roboto';
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; 
}
form {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0,0,0,0.6)),url(../Imagem/mapa-1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  backdrop-filter: blur(5px);
  color: aliceblue;
  width: 90%;
  max-width: 600px;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 2px 2px 2px rgb(142, 136, 130);
}
h1 {
  padding-bottom: 40px;
  text-align: center;    
}
input {
  padding: 10px;
  margin: 0 0 40px 0px;
  border-radius: 10px;
  border: none;
  border: 1px solid rgb(179, 179, 179);
  background-color: rgb(199, 199, 199);
}
.btn {
  background-color: green;
  color: azure;
  font-weight: 300;
  padding: 10px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.6s, color 0.6s blue;
}
button:hover {
  transform: scale(1.1);
  color: rgb(245, 245, 248);
  background-color: blue;
}
.container {
    display: grid;
    grid-template-columns: repeat(2 ,1fr);
    gap: 20px;
}
.container p {
  border-bottom: 1px solid rgb(245, 242, 242);
  padding: 10px;
  text-shadow:1px 1px 2px black; 
}
.container p span {
  padding-left: 6px;
  font-weight: 500;
}
@media (max-width: 480px) {
  form {
    width: 90%;
    padding: 20px;
  }
  h1 {
    font-size: 2rem;
  }
  input,
  .btn {
    width: 100%;
  }
  .btn {
    margin-top: 10px;
  }
  .container {
    grid-template-columns: 1fr;
  }
}

JavaScript

const cep = document.querySelector('#cep');
const button = document.querySelector('#search-cep');

function resetAddress() {
    document
        .querySelectorAll('.container span')
        .forEach(span => {
            span.textContent = '---';
        });
}
function fillAddress(data) {
    $('#rua-val').text(data.logradouro || '---');
    $('#bairro-val').text(data.bairro || '---');
    $('#cidade-val').text(data.localidade || '---');
    $('#estado-val').text(data.uf || '---');
}

button.addEventListener('click', async () => {
  event.preventDefault();
    const cepValue = cep.value.trim().replace(/\D/g, '');
    if (cepValue.length !== 8) {
      console.error('CEP must contain exactly 8 digits.');
      return;
    }
    try {
        resetAddress();
        const response = await fetch(
          `https://viacep.com.br/ws/${cepValue}/json/`
        );

        if (!response.ok) {
          throw new Error(`HTTP error: ${response.status}`);
        }

        const data = await response.json();
        if (data.erro) {
          resetAddress();
          throw new Error('CEP not found.');
        }
        console.log(data);
        fillAddress(data);
    } catch (error) {
      console.error('Could not retrieve CEP:', error);
    }
});