JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.js"></script>
<div class="container pt-3">

  <ul class="list-group scores mb-3">
    <li class="list-group-item d-flex align-items-center" data-score="0" data-round="0" data-time="0">
      <div class="mr-auto whatami">
        original (swipe me first)
      </div>
      <span class="badge badge-secondary badge-pill">
        Swiped yeh!!!
      </span>
    </li>
  </ul>

</div>

SCSS

/* bootstrap vendors
-------------------------------------------------- */

// core variables and mixins
@import "https://raw.githubusercontent.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.min.css";

/* test
-------------------------------------------------- */

var {
  font-style: normal;
}

JavaScript

var listitem = $('.scores li:last-child');

listitem = $(listitem).clone();

$('.whatami', listitem).text('clone (swipe me second)');

listitem.appendTo('.scores');

$(".scores li").swipe({

  swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
    $(this).find('.badge')
  },

  threshold: 40

});