JSFiddle - React, Tailwind, and code Playground

by mariomc

HTML

<div class="listing">
     <div class="item userEgg">
        <a href="javascript:" onclick="sendRequests()">
            <div class="img small" style="background-image:url('http://banagale.com/blog/wp-content/uploads/2009/01/fb_no_photo.jpg');"></div>
         </a>
    </div>
<div class="item userEgg">
            <div class="img small" style="background-image:url('http://graph.facebook.com/ricardo.tenrinho/picture?type=large');"></div>
        </div>
                <div class="item userEgg medium">
            <a href="javascript:" onclick="sendRequests('1366633314');">
                <div class="img medium" style="background-image:url('http://graph.facebook.com/entomb/picture?type=large');"></div>
            </a>
        </div> 
<div class="item userEgg">
            <div class="img small" style="background-image:url('http://graph.facebook.com/mario.mc.goncalves/picture?type=large');"></div>
        </div>
                <div class="item userEgg">
            <a href="javascript:" onclick="sendRequests('1366633314');">
                <div class="img large" style="background-image:url('http://graph.facebook.com/entomb/picture?type=large');"></div>
            </a>
        </div> 
<div class="item userEgg">
            <div class="img medium" style="background-image:url('http://graph.facebook.com/ricardo.tenrinho/picture?type=large');"></div>
        </div>
                <div class="item userEgg off medium">
            <a href="javascript:" onclick="sendRequests('1366633314');">
                <div class="img medium" style="background-image:url('http://graph.facebook.com/mario.mc.goncalves/picture?type=normal');"></div>
            </a>
        </div> 
<div class="item userEgg ">
            <div class="img small" style="background-image:url('http://graph.facebook.com/ricardo.tenrinho/picture?type=large');"></div>
        </div>
                <div class="item userEgg">
            <a href="javascript:" onclick="sendRequests('1366633314');">
          ...

CSS

.egg{
background-image: url("http://graph.facebook.com/mario.mc.goncalves/picture?type=normal"); 
width:70px;
height:70px;
margin:2px; 
-webkit-border-radius: 35px;
        -moz-border-radius: 35px;
        border-radius: 35px;
        background-size: cover;
}
    .userEgg h3{  
        display:none; 
        margin-top:2px;
        text-align: center; 
        font-size:15px; 
    }
    .userEgg:hover{
        z-index: 1001;
    cursor: pointer;
    /*
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
    */
    }
.userEgg:hover h3{ 
display:block; 
}
.listing{
position: relative;
}
.userEgg{
position:absolute; 
}
.userEgg:nth-child(2n){
    top: 50px;
}
.userEgg:nth-child(1){
left: 0;
}
.userEgg:nth-child(2){
left: 72px;
}
.userEgg:nth-child(3){
left: 144px;
}
.userEgg:nth-child(4){
left: 216px;
}
    .userEgg:nth-child(5){
        left: 288px;
    }
    .userEgg:nth-child(6){
        left: 360px;
    }
    .userEgg:nth-child(7){
        left: 432px;
    }
    .userEgg:nth-child(8){
        left: 504px;
    }
    .userEgg:nth-child(9){
        left: 576px;
    }
    .userEgg .img{ 
        background-position: center center;
        background-repeat: no-repeat;
        border:1px solid #CCC;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background-size: cover;
        margin: -50%;
    }
    .userEgg .img.small{
    width: 70px;
    height: 70px;
    }
    .userEgg .img.medium{
    width: 105px;
    height: 105px;
    }
    .userEgg .img.large{
    width: 140px;
    height: 140px;
    }
    .userEgg .img{
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    .userEgg.off h3{ 
        font-size: 13px;
    }
    .userEgg.off:hover h3{ 
        display:block; 
    }
    .listing{
        padding:5px;
        height:200px;
        margin-top:100px;
   ...