JSFiddle - React, Tailwind, and code Playground

by mtsaikumar1

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
<p class="signly-text-segment play" data-signly="{&quot;index&quot;:9}" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" data-uw-styling-context="true">‌Swipe or click text to view sign language.
  <div class="signly-play"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="play" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="signly-play-icon svg-inline--fa fa-play fa-w-14 fa-2x active">
      <path fill="currentColor" d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" class=""></path>
    </svg></div>
</p>

CSS

p.play{
  position: relative;
  padding-left: 25px;
  margin: 0;
  display: inline;
}

.signly-play{
  position: absolute;
  left:5px;
  top:5px;
  width: 20px;
  cursor: pointer;
}

JavaScript

$(document).ready(function() {

var p_width = $('.play').innerWidth();
  $(".signly-play").on("swipe", function() {
    $(this).animate({
      left: p_width + 20
    });
    
  });
});