JSFiddle - React, Tailwind, and code Playground

HTML

<script id="modal-template" type="text/x-template">
  <transition name="modal">
    <div class="modal">
      <form enctype="multipart/form-data" method="post" id="form" onsubmit="send(event, &quot;send.php&quot;)">
        <h1 class="modal__title h1">Сделать заказ</h1>
        <icon @click="$emit('close')">✕</icon>
        <label for="contact">Контакт для связи</label>
        <input class="form-required" type="text" name="contact" id="contact" placeholder="Мессенджер или e-mail" required="required"/>
        <button class="modal__button button" type="submit" @click="$emit('close')">Отправить</button>
      </form>
    </div>
  </transition>
</script>
<main id="app">
  <modal v-if="showModal" @close="showModal = false"></modal><a class="button button--small" id="show-modal" @click="showModal = true">Заказ</a>
</main>

CSS

* {
  font-family: '-apple-system', sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.modal__button {
  background-color: #746bfb !important;
}
.button {
  background-color: #007aff;
  color: #fff;
  padding: 10px;
  display: block;
  width: 120px;
  text-align: center;
  border-radius: 5px;
  margin-right: 0 auto;
  border: none;
  margin-top: 10px;
}

JavaScript

new Vue ({
  el: '#app',
  data() {
    return {
      showModal: false
    }
  }
})

Vue.component("modal", {
  template: "#modal-template"
});

let btn = document.querySelector('.button--small')

// btn.addEventListener('click', function(){
// 	alert('s')
// })