JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<p>Praesent metus tellus, elementum eu, semper a, <a href="#!" class="swipe-effect">adipiscing nec</a>, purus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Ut a nisl id ante tempus hendrerit. Nullam tincidunt adipiscing enim.</p>

SCSS

@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,700);

body{
    font-family: 'Ubuntu', sans-serif;
    font-weight: 400;
    color: #333;
    font-size: 16px;
}

*{
    box-sizing: border-box;
}

a{
    text-decoration: none;
}

p{
    line-height: 1.6;
}

.swipe-effect{
    font-weight: 700;
    color: #5ebcf2;
    & > span{
        border-bottom: 2px solid #b6daed;
        &.swipe-active{
          border-bottom: 2px solid #000;
        }
    }
}

JavaScript

/**
 * Swipe effect
 */

var swipeEffect = {};

swipeEffect.init = function(){
    var elems = document.getElementsByClassName('swipe-effect');
    for(var i = 0; i < elems.length; i++){
        swipeEffect.setup(elems[i]);
    }
}

swipeEffect.setup = function(elem){
    var t = elem.innerText || elem.textContent;
    t = t.split('');
    elem.innerHTML = '';
    for(var i = 0; i < t.length; i++){
        var n = document.createElement('span');
        n.innerHTML = t[i];
        elem.appendChild(n);
    }
}

swipeEffect.fx = {
	state: false
};

swipeEffect.fx.in = function(elem){
    swipeEffect.fx.state = true;
    var spans = elem.getElementsByTagName('span');
}

swipeEffect.fx.out = function(elem){
    swipeEffect.fx.state = false;
    var spans = elem.getElementsByTagName('span');
}

swipeEffect.init();