JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>
<div data-role="page" id="2">
    <div id="header" data-role="header">
        <h3>Title</h3>
            <a href="#second" class="ui-btn-right">dummy</a>
       </div>

    <div class="content overfl">
            <div class="cardholder">
              
                
                 <div class="card moving2" >
                    <img class=".card-image" src='http://38.media.tumblr.com/84d982c883aa3ff654e6fa7ee7011fba/tumblr_mu00wgk2zN1rz6rffo1_1280.jpg'/>
                    <h1><b>Not Madona</b> , 26</h1>
                    <p>Yep, just some simple content ecapsulated in this card.</p>
                </div>
                
                <div class="card moving">
                    <img class=".card-image" src='http://i40.tinypic.com/ofxe21.jpg'/>
                    <h1><b>Madona</b> , 52</h1>
                    <p>Yep, just some simple content ecapsulated in this card.</p>
                </div>
                
                
                
            </div>

        <a href="#" id="custom-btn-right" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-notext">Icon only</a>
        <a href="#" id="custom-btn-left"  class="ui-btn ui-btn-inline ui-icon-check ui-btn-icon-notext">Icon only</a>
            
           
    </div>
    <!--div id="footer" data-role="footer">Footer</div-->
</div>

CSS

<style type='text/css'>


.multi-column {
    columns:300px 3;
    -webkit-columns:300px 3;
}

.cardholder
{
      width:350px;
      height:470px;
      margin:15px;
      border-radius: 10px;
      border:2px solid #AAA;
    
}

.card {
    background:white;
    border-radius: 10px;
    border:2px solid #AAA;
    overflow:hidden;
    z-index:1;
    position: absolute;
    width:350px;
 
    
}
.big {
    width:500px;
}
}



.card h1 {
    margin:0px;
    padding:10px;
    padding-bottom:0px;
}

.card p {
    margin:0px;
    padding:10px;
}



.rightColumn,
.leftColumn {
    display:inline-block;
    width:49%;
    vertical-align:top;
}

.column {
    display:inline-block;
    vertical-align:top;
}

[data-role=page] {
    padding:0;
}
[data-role=main] {
    padding:0;
}


.overfl
{
    overflow: hidden;
}


#custom-btn-right {
    
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
   
    left:100px;
    
}
#custom-btn-left {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    left: 200px;
    
}




img {
    max-width: 100%;
    height:350px;
    transform:translate3d(0px, 0px,0px);
    user-drag: none; 
    -moz-user-select: none;
    -webkit-user-drag: none;
     overflow:hidden;		   
	}
</style>
<!-- access to the HEAD element -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>

JavaScript

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
        || window[vendors[x]+'CancelRequestAnimationFrame'];
    }
    
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
                                       timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    
    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());


var e1=document.querySelector(".moving");
var hammertime1 = new Hammer(e1);
resetHammerEvents(hammertime1,e1);
var e2=document.querySelector(".moving2");
var hammertime2 = new Hammer(e2);
resetHammerEvents(hammertime2,e2);

var startX = 0;
var startY = 0;
var newX,newY;
var x=0;
console.log(startX +" " +startY);

function resetHammerEvents(hammertime,e) {
    hammertime.on('pan', function(ev) {
        newX= startX+ ev.deltaX;
        newY= startY+ ev.deltaY;
        e.style.transition = '';
        requestAnimationFrame(draw);  
    });
    hammertime.on("panend", function(ev) {
        if(ev.isFinal) {
            if (ev.deltaX>300 || ev.deltaX<-300) {
                newX=500;
                e.style.transition = 'all 0.3s';
            }
            else {
                //return to start position
                newX= startX;
                newY= startY;
                e.style.transition = 'all 0.3s';
            }
            requestAnimationFrame(draw);  
        }
    });
   ...