JSFiddle - React, Tailwind, and code Playground

by darkylmnx

HTML

<button class="contact-btn-opener">contact 2</button>
<button class="contact-btn-close">fermer</button>
<div class="contact-modal">
  <p>
    <input type="text">
  </p>
  <p>
    <input type="text">
  </p>
  <p>
    <input type="text">
  </p>
  <p><button>contact</button></p>
</div>

CSS

.contact-modal {
  background: pink;
}

.contact-btn-opener,
.contact-btn-close {
  display: none; 
}

@media screen and (max-width: 1024px) {
  .contact-btn-opener,
  .contact-btn-close {
    display: block; 
  }
  
  .contact-modal {
    display: none;
  }
  
  .contact-modal.is-opened {
    display: block;
  }
}

JavaScript

var $contactModal = document.querySelector('.contact-modal');
var $contactBtnOpener = document.querySelector('.contact-btn-opener');
var $contacBtnClose = document.querySelector('.contact-btn-close');

$contactBtnOpener.addEventListener('click', function(event) {
	event.preventDefault();
  $contactModal.classList.add('is-opened');
});

$contacBtnClose.addEventListener('click', function(event) {
	event.preventDefault();
  $contactModal.classList.remove('is-opened');
});