JSFiddle - React, Tailwind, and code Playground

by mtsaikumar1

HTML

<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.

</p>

CSS

.signly-text-segment {
  background-image: url("data:image/svg+xml,%3Csvg 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'%3E%3Cpath 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=''%3E%3C/path%3E%3C/svg%3E");
  
  background-position: center left 5px;
  background-repeat: no-repeat;
  padding-left: 25px;
  background-size: 13px;
}