JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2 class="modal-title">Sua conversão</h2>
    <p class="modal-text"></p>
  </div>
</div>

<div class="content">
  <div class="dolar-real">
    <div class="content-text">
      <p>Dólar para real</p>
      <img src="https://via.placeholder.com/100" alt="Dólar">
    </div>

    <div class="entrada">
      <input type="text" id="dolarToReal">
      <button id="btnDolarToReal" onclick="dolarParaReal()">
      <img src="https://via.placeholder.com/20" alt="Botão de conversao">
      </button>
    </div>
  </div>
</div>

CSS

#myModal {
  visibility: hidden;
}

JavaScript

function dolarParaReal() { //Função para calcular e mostrar o resultado
  var valor = document.getElementById('dolarToReal').value;
  var valorNumero = parseFloat(valor);

  var resultado = valorNumero * 5.71;
  var mostrarValor = `O valor convertido é: ${resultado}`;
  document.getElementsByClassName('modal-text')[0].innerHTML = mostrarValor;

  abrirModal();
}

function abrirModal() { //função para abrir o modal
  myModal.style.visibility = "visible";
}

var span = document.getElementsByClassName("close")[0]

span.onclick = function fecharModal() { //função para fechar o modal
  myModal.style.visibility = "hidden";
}