JSFiddle - React, Tailwind, and code Playground

CSS Bubble Forms

by Jennifer Perrin

HTML

<div class="container">
    	<div id="notic">HOVER MENU ITEM TO SHOW BUBBLE FORMS</div>
    	<ul class="menu">
        	<li><a href="#">LOGIN</a>
            	<div class="login" id="circle">
                    <div class="panel">
                        <ul>
                            <li><input type="text" placeholder="USERNAME"/></li>
                            <li><input type="password" placeholder="PASSWORD"/></li>
                            <li><input id="login" type="button" value="LOGIN"/></li>
                        </ul>
                    </div>
        		</div>
            </li>
            <li><a href="#">I'M NEW</a>
            	<div class="register" id="circle">
                    <div class="panel">
                        <ul>
                            <li><input type="text" placeholder="USERNAME"/></li>
                            <li><input type="password" placeholder="PASSWORD"/></li>
                            <li><input type="text" placeholder="EMAIL"/></li>
                            <li><input id="register" type="button" value="REGISTER"/></li>
                        </ul>
                    </div>
        		</div>
            </li>
            <li><a href="#">FORGOT PASSWORD</a>
            	<div class="login" id="circle">
                    <div class="panel">
                        <ul>
                            <li><input type="text" placeholder="EMAIL"/></li>
                            <li><input type="password" placeholder="PASSWORD"/></li>
                            <li><input id="login" type="button" value="SEND PASSWORD RESET"/></li>
                        </ul>
                    </div>
        		</div>
            </li>
        </ul>
    </div>

CSS

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

body
{
    padding:0;
    margin:0;
  background:#f7f7f7;
}
.container
{
	margin:20px auto;
	width:1000px;
	height:500px;
}
#notic
{
	font-family: 'Anton', sans-serif;
	font-size:22px;
	color:#09F;
	text-shadow:0 0 20px #fff,0 0 20px #aaa;
	text-align:center;
	padding:10px 0 30px 0;
}
.menu
{
	margin:0 auto;
	padding:0 0 0 200px;
	list-style:none;
}
.menu li
{
	float:left;
	margin-left:10px;
}
.menu li:hover div#circle
{
	display:block;
	-moz-animation:popup .45s ease-out;  
	-webkit-animation:popup .45s ease-out; 
	-o-animation:popup .45s ease-out;  
	-ms-animation:popup .45s ease-out; 
	animation:popup .45s ease-out;  
}
.menu li a
{
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-ms-border-radius:10px;
	-o-border-radius:10px;
	
	display:inline-block;
	
	border:1px solid #ccc;
	
	width:150px;
	color:#666;
	padding:10px 22px;
	
	font-family: 'Anton', sans-serif;
	font-size:18px;
	text-decoration:none;
	text-align:center;
	
	background: rgb(255,255,255);
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); 
	background:...