JSFiddle - React, Tailwind, and code Playground

modal rewoark

by Jennifer Perrin

HTML

<a href="#modal">Contact Us</a>
<a href="#x" class="overlay" id="modal"></a>

<div class="box">
    <form action="" method="post" id="modalForm">
        <p>
            <label for="name"><small>Your Name</small></label><br>
            <input name="name" id="name" value="" type="text" />
        </p>
            
        <p>
            <label for="email"><small>Email</small></label><br>
            <input name="email" id="email" value="" type="text" />
        </p>
                
        <p>
            <label for="message"><small>Message</small></label><br>
            <textarea name="message" id="message" cols="58" rows="5"></textarea>
        </p>
                    
        <p><input name="submit" id="submit" tabindex="5" value="Send Message" type="submit" /></p>
    </form>
    <a class="close" href="#close"></a>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway);

body {
	margin: 0;
	padding: 0;
	font-family: Raleway, sans-serif;
	font-size: 18px;
	background-color: #f1f1f1;
}

a:link { text-decoration: none; color: #c9371e; }
a:visited { text-decoration: none; }

.box {
	width: auto;
	height: auto;
	left: 50%;
	top: 10%;
	padding: 5px;
	position: fixed;
	display: inline-block;
	background: #FFF;
	box-shadow: 0 0 10px rgba(0,0,0,.4);
	visibility: hidden;
	z-index: 10;
	
    -webkit-transform: translate(-50%,-50%);
	   -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
         -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    
	-webkit-transition: opacity .5s, top .5s;
	   -moz-transition: opacity .5s, top .5s;
        -ms-transition: opacity .5s, top .5s;
         -o-transition: opacity .5s, top .5s;
            transition: opacity .5s, top .5s;
}
    .box p,a { font-family: Raleway, sans-serif; }

.overlay {
	background-color: rgba(0,0,0,0.6);
	bottom: 0;
	cursor: default;
	left: 0;
	opacity: 0;
	position: fixed;
	right: 0;
	top: 0;
	visibility: hidden;
	z-index: 1;
    
	-webkit-transition: opacity .5s;
       -moz-transition: opacity .5s;
        -ms-transition: opacity .5s;
         -o-transition: opacity .5s;
            transition: opacity .5s;
}
    .overlay:target {
        visibility: visible;
        opacity: 1;
    }
    .overlay:target+.box {
        top: 42%;
        opacity: 1;
        visibility: visible;
    }

.close {
   ...