JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <span><i class="shopping-cart"></i></span>
</header>
<div id="icon-shopping-cart"> carrello </div>
<div style ="margin-top:20px;">
    
<div class="item">
    <div class="title-bar">
        <a href="Local-detail.html" class="car-name">2004 Honda Fit Canter .</a>
    </div>
    
    <div class="photo">
        <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
    </div>
    <div class="detail-text ">
        Hyndai Grand Starex, 2008, 
    </div>
    <div class="action clearfix ">
        <div class="inquery-btn"  data-toggle="modal" data-target="#inquiry">Inquery</div>
        <div class="addcart">Add Cart</div>
        </div>
 </div>	<!-- END item -->
    
    <div class="item">
    <div class="title-bar">
        <a href="Local-detail.html" class="car-name">2004 Honda Fit Canter .</a>
    </div>
    
    <div class="photo">
        <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
    </div>
    <div class="detail-text ">
        Hyndai Grand Starex, 2008, 
    </div>
    <div class="action clearfix ">
        <div class="inquery-btn"  data-toggle="modal" data-target="#inquiry">Inquery</div>
        <div class="addcart"> Add Cart</div>
        </div>
 </div>	<!-- END item -->
        
        <div class="item">
    <div class="title-bar">
        <a href="Local-detail.html" class="car-name">2004 Honda Fit Canter .</a>
    </div>
    
    <div class="photo">
        <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
    </div>
    <div class="detail-text ">
        Hyndai Grand Starex, 2008, 
    </div>
    <div class="action clearfix ">
        <div class="inquery-btn"  data-toggle="modal" data-target="#inquiry">Inquery</div>
        <div class="addcart"> Add Cart</div>
        </div>
 </div>	<!-- END item -->
    
</div>

CSS

header{
    text-align:right;
    width:700px;
}
.shopping-cart {
    display: inline-block;
    background: url('http://cdn1.iconfinder.com/data/icons/jigsoar-icons/24/_cart.png') no-repeat 0 0;
    width: 24px;
    height: 24px;
    margin: 0 10px 0 0;
}
.item{
    background-color: #FFFFFF;
	border: 1px solid #CCCCCC;
	overflow:hidden;
	color:#777777;
	float: left;
	position: relative;
    margin-right:10px;
}

.inquery-btn,.addcart{
	background-color: #E6E6E6;
	border-right: 1px solid #BBBBBB;
	cursor: pointer;
	font-size: 9pt;
	padding: 9px 0;
	text-shadow: 1px 1px 0 #FFFFFF;
	float:left;
	width:49%;
	color:#000;
	text-align:center;
}
.clearfix{
    clear:both;
}

JavaScript

$('.addcart').on('click', function () {
			var cart = $('#icon-shopping-cart');
			var imgtodrag = $('.item .photo').find("img").eq(0);
			if (imgtodrag) {
				var imgclone = imgtodrag.clone()
				.offset({
				top: imgtodrag.offset().top,
				left: imgtodrag.offset().left
				})
				.css({
				'opacity': '0.5',
				'position': 'absolute',
				'height': '150px',
				'width': '150px',
				'z-index': '100'
			})
			.appendTo($('body'))
 			.animate({
			'top': cart.offset().top + 10,
			'left': cart.offset().left + 10,
			'width': 75,
			'height': 75
			}, 1000, 'easeInOutExpo');
			setTimeout(function () {
			cart.effect("shake", {
			times: 2
			}, 200);
			}, 1500);

			imgclone.animate({
			'width': 0,
			'height': 0
			}, function () {
				$(this).detach()
			});
		}
		});