JSFiddle - React, Tailwind, and code Playground

HTML

<p>
  <label for="cepDestino">CEP Destino</label>
  <input class="input" type="text" name="cepDestino" id="cepDestino">
  <div id="bairro"></div> - <div id="cidade"></div> - <div id="estado"></div>
</p>


<p>
  <input class="button" type="button" id="calcular" value="Calcular" onclick="calc();">
</p>

CSS

label {
	width: 100%;
	display: inherit;
	font-weight: bold;
	font-size: 3em;
	margin-top: 41px;
}
.input, #descricao {
	width: 100%;
	height: 111px;
	font-weight: bold;
	font-size: 4em;
	text-align: center;
	border-radius: 5px;
	background-color: #ECF0F1;
}
.button {
	width: 100%;
	font-size: xx-large;
	height: 116px;
	background-color: #2CC36B;
	border-radius: 5px;
	margin-top: 76px;
}

JavaScript

function calc() {
	var cepDestino = document.getElementById( 'cepDestino' ).value;
	if(cepDestino.trim() != ""){
		var request = new XMLHttpRequest();
		request.open('GET', 'http://cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep='+cepDestino, true);
		
		request.onload = function() {
		  if (request.status >= 200 && request.status < 400) {
			// Deu certo... Use a variável abaixo para obter os dados
			var data = JSON.parse(request.responseText);
			document.getElementById('bairro').value(data.bairro);
      document.getElementById('cidade').value(data.cidade);
      document.getElementById('estado').value(data.estado);
      //console.log(data);
		  } else {
			// Não deu certo    
		  }
		};
		
		request.onerror = function() {
		  // A conexão nem sequer deu certo
		};
		
		request.send();
	
	
}