JSFiddle - React, Tailwind, and code Playground

by tracyfu

HTML

<p>Hi please feel free to contact us!</p>
<input type="button" id="contact-button" value="Contact Us" />
<form id="contact-form">
    <label for="email">Email</label>
    <input type="text" id="email" value="" />
    <textarea></textarea>
</form>

CSS

body {
  margin: 20px;
}

form {
    border: 1px solid #ccc;
    padding: 10px;
    width: 302px;
}

p {
    margin-bottom: 1em;
}

textarea {
    border: 1px solid #ccc;
    display: block;
    height: 100px;
    margin-top: 10px;
    width: 300px;
}

#contact-button {
    display: none;
    margin-bottom: 1em;
}

#email {
    background: none;
    border: 1px solid #ccc;
    padding: 5px;
    width: 200px;
}

JavaScript

$('#contact-form').hide();
$('#contact-button').show().click(function() {
    $('#contact-form').show();
});