JSFiddle - React, Tailwind, and code Playground

by lsubirana

HTML

<span class="attribute">
    Login Required!
</span>

<a href="#" class="tile fb load" style="z-index: 10;"><div style="/* overflow: hidden; */ display: block;">
                      <div class="bg"></div>
                      <div style="text-align:center;font-size:90%;margin:3px;">Latest Posts</div>
                      <div class="blue" style="background:white;margin: 5px 10px 10px;">
                        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FDialogicinc&amp;width=450&amp;height=295&amp;colorscheme=light&amp;show_faces=false&amp;header=false&amp;stream=true&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:400px;" allowtransparency="true"></iframe>
                      </div>
                  </div></a>
<a href="#" class="tile li" style="z-index: 1;"></a>

CSS

body{
    background: #fff;
    text-align: center; 
    font-size: 13px;
    font-family: Arial;
    line-height: 18px;
    color: #474747;
}
.sm > div {
position: relative;
}


.sm .tile {
border: none !important;
}
.tile {
position: relative;
z-index: 1;
height: 248px;
border: 2px solid black;
}
.tile {
width: 39px;
height: 40px;
margin-bottom: 1px;
margin-right: 1px;
display: block;
background-image: url("http://edit.dialogic.com/tn/static/images/share-icons.png");
background-repeat: no-repeat;
}
.tiles .sm .tile.fb {
background-position: 0 0px;
}
.tiles .sm .tile.li {
background-position: 0 -43px;
}
.tile > div {
display: none;
position: absolute;
top: -50px;
left: -485px;
width: 485px;
height: 440px;
z-index: 20;
color: white;
background: #3b5998;
box-shadow: 2px 10px 20px black;
}
.attribute:after{
    content: '';
    background: #0090CF;
    height: 10px; width: 10px;
    position: absolute;
    bottom: -5px; left: 10%;
    z-index: -1;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    box-shadow: 0 0 6px rgba(0,0,0,0.6);
}
.attribute{
    border:1px solid #0090CF;
    background: rgb(240,240,240);
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(0,0,0,0.6);
    position: relative;
    padding: 1px 5px;
    font-size: .8em;
}

JavaScript

$('.tile.load').on('mouseenter', function () {
            $(this).children().show('fast').parent().css('z-index',10);
            return false;
        }).on('mouseleave', function () {
            $(this).children().hide('fast').parent().css('z-index', 1);
            return false;
        })