JSFiddle - React, Tailwind, and code Playground

by erackson

HTML

<div id="indicarAmigo">
  <a id="ia">abre</a>
  <div class="formIndicarAmigo"> </div>
 </div>

CSS

.active{ display:block;}
#ia{ display: inline-block;  *display: inline; *zoom: 1;    text-decoration: none;    cursor:pointer; width:100%; height:100%; }
#indicarAmigo        { width:40px; height:30px; padding:0px; float:left; position:relative;  border-right:1px solid #e0e1e1;}
.formIndicarAmigo     { width: 610px; background:#ccc; clear:both; right: -285px;}
.formIndicarAmigo{
        display: none;    position: absolute;        top: 30px;    z-index: 99998;        padding: 20px;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
        background-image: -webkit-linear-gradient(top, #fff, #eee);
        background-image: -moz-linear-gradient(top, #fff, #eee);
        background-image: -ms-linear-gradient(top, #fff, #eee);
        background-image: -o-linear-gradient(top, #fff, #eee);
        background-image: linear-gradient(top, #fff, #eee);          
        box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
        -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
        -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
        border-left:1px solid #e0e1e1;
        border-right:1px solid #e0e1e1;
        border-bottom:1px solid #e0e1e1;
}

JavaScript

$('#ia').click(function(){
        $(this).next('.formIndicarAmigo').slideToggle();
        $(this).toggleClass('active');                    

    })