JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div class="element">
    <div class="person">
        <div class="piccontainer">
            <div class="pic fa fa-balance-scale"></div>
        </div>
        <div class="info">
            <p class="name">Name Béla1</p>
            <p>adat1: 20</p>
            <p>adat2: 30</p>
            <p>adat3: 40</p>
        </div>  
    </div>
    <div class="extrainfo">
        <div class="imageplace"></div>
        <p class="name">Name Béla1</p>
            <p>adat1: 20</p>
            <p>adat2: 30</p>
            <p>adat3: 40</p>
        <a class="close">x</a>
    </div>
</div>
<div class="element">
    <div class="person">
        <div class="piccontainer">
            <div class="pic fa fa-balance-scale"></div>
        </div>
        <div class="info">
            <p class="name">Name Béla2</p>
            <p>adat1: 20</p>
            <p>adat2: 30</p>
            <p>adat3: 40</p>
        </div>  
    </div>
    <div class="extrainfo">
        <div class="imageplace"></div>
        <p class="name">Name Béla2</p>
            <p>adat1: 20</p>
            <p>adat2: 30</p>
            <p>adat3: 40</p>
        <a class="close">x</a>
    </div>
</div>
<div class="element">
    <div class="person">
        <div class="piccontainer">
            <div class="pic fa fa-balance-scale"></div>
        </div>
        <div class="info">
            <p class="name">Name Béla3</p>
            <p>adat1: 20</p>
            <p>adat2: 30</p>
            <p>adat3: 40</p>
        </div>  
    </div>
    <div class="extrainfo">
        <div class="imageplace"></div>
        <p class="name">Name Béla3</p>
            <p>adat1: 20</p>
            <p>adat2: 30</p>
            <p>adat3: 40</p>
        <a class="close">x</a>
    </div>
</div>
<div class="element">
    <div class="person">
        <div...

CSS

.element{
    width: 150px;
    padding: 10px 0;
    border: 1px solid #C0C0C0;
    background-color: #F6F6F6;
    font-family: arial;
    z-index: 1;
    float: left;
}
.piccontainer{
    display: block;
    width: 70px;
    height: 70px;
    margin: 0 auto;
}
.pic{
    width: 70px;
    height: 70px;
    text-align: center;
    line-height: 70px;
    font-size: 30px;
    color: #ffffff;
    background-color: #4679BD;
    border-radius: 100%;
    position: relative;
    z-index: 3;
}
.info{
    padding: 0 10px;
}
.person p{
    margin: 0px;
    font-size: 12px;
    color: #C0C0C0;
}
.person p.name{
    font-size: 15px;
    color: #252525;
    margin: 10px 0 2px 0;
}
.extrainfo{
    display: none;
    opacity: 0;
    position: absolute;
    width: 300px;
    height: 400px;
    top: 0px;
    left: 0px;
    background-color: #F6F6F6;
    border: 1px solid #4679BD;
    z-index: 2;
}
.imageplace{
    height: 100px;
    width: 75px;
    background-color: #ffffff;
}

JavaScript

$(".element").click(function() {
    var elem = $(this),
        pic = elem.children(".person").find(".pic"),
    	imgxy = elem.children(".person").find(".piccontainer"),
        	imgxyTop = imgxy.position().top,
            imgxyLeft = imgxy.position().left,
        imgpalce = elem.children(".extrainfo").find(".imageplace"),
        	top = imgpalce.position().top,
            left = imgpalce.position().left;
    
    if (elem.hasClass("active")) { 
        elem.removeClass("active");
        	TweenMax.to(".extrainfo", 0.5, {
            	opacity: 0,
            	display: 'none',
        	});
            TweenMax.to(pic, 1, {
                top: imgxyTop,
                left: imgxyLeft,
            });
        	TweenMax.to(pic, 0, {
                top: 0,
                left: 0,
                position: 'relative',
                delay: 1,
            });
        
		
    } else {
        $(".element").removeClass("active");
        	TweenMax.to(".extrainfo", 0.5, {
            	opacity: 0,
            	display: 'none',
        	});
        $(elem).addClass("active");
        TweenMax.to(elem.children(".extrainfo"), 2, {
            opacity: 1,
            display: 'block',
            delay: 0.2,
        });
        TweenMax.to(pic, 0, {
            position: 'absolute',
            top: imgxyTop,
            left: imgxyLeft,
          
        });
        TweenMax.to(pic, 2, {
            top: top,
            left: left,
        });
        
               

    };
    
     
    
    
    




});