JSFiddle - React, Tailwind, and code Playground

by Christopher Welborn

HTML

<div id='contactForm' style='display: none;'>
  This is where the real form content would be.
  <div id="formButtons">
      <input type="submit" id="sendMessage" name="sendMessage" value="Send Email"/>
      <input type="button" id="cancel" name="cancel" value="Cancel"/>
  </div>
</div>

<a href='#contactForm' onclick='javascript: show_form();'>Show form.</a>

CSS

#contactForm {
    position: absolute;
    top: 40px;
    width: 300px;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    padding: 5px;
}

JavaScript

function show_form() {
    var frm = document.getElementById('contactForm');
    frm.style.display = 'block';
}

var cancelbtn = document.getElementById('cancel');
cancelbtn.onclick = function () {
    var frm = document.getElementById('contactForm');
    frm.style.display = 'none';
}

// This send handler is only for illustration purposes.
var sendbtn = document.getElementById('sendMessage');
sendbtn.onclick = function () {
    alert('Your message was sent.');
}