JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<article> <span class="meta">18th May 2015</span>
    <a href="#!" class="swipe-fx">Pellentesque commodo</a>
    <section>
        <p>Morbi vestibulum volutpat enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci.</p>
        <p>Curabitur a felis in nunc fringilla tristique. Phasellus tempus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Donec posuere vulputate arcu. Morbi mattis ullamcorper velit.</p>
        <p>Aenean ut eros et nisl sagittis vestibulum. Donec posuere vulputate arcu. Vivamus euismod mauris.</p>
        <p class="read-more"><a href="#!">Read More</a>
        </p>
    </section>
</article>

<article>
    <span class="meta">16th May 2015</span>
    <a href="#!" class="swipe-fx">Donec posuere vulputate arcu. Nam pretium turpis et arcu</a>
    <section>
        <p>Morbi vestibulum volutpat enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci.</p>
        <p>Curabitur a felis in nunc fringilla tristique. Phasellus tempus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Donec posuere vulputate arcu. Morbi mattis ullamcorper velit.</p>
        <p>Aenean ut eros et nisl sagittis vestibulum. Donec posuere vulputate arcu. Vivamus euismod mauris.</p>
        <p class="read-more"><a href="#!">Read More</a>
        </p>
    </section>
</article>

<article> <span class="meta">15th May 2015</span>
    <a href="#!" class="swipe-fx">Cras ultricies mi eu turpis hendrerit fringilla. Suspendisse feugiat</a>
    <section>
        <p>Morbi vestibulum volutpat enim. Vestibulum ante ipsum primis in faucibus orci...

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway:800,400|Merriweather:300,400,700);
 a.swipe-fx {
    background-size: 200% auto;
    -webkit-background-size: 200% auto;
    -moz-background-size: 200% auto;
    background-position: -0% 0;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #cdc5d6 50%);
    background-repeat: repeat;
    transition: background-position 0.5s ease-out;
    -webkit-transition: background-position 0.5s ease-out;
    font-size: 30px;
    color: #534168;
    text-decoration: none;
    line-height: 1.1;
    letter-spacing: 0px;
    display: inline;
    text-transform: uppercase;
    font-weight: 800;
    font-family:'Raleway', sans-serif;
}
a.swipe-fx:hover, a.swipe-fx:focus {
    background-position: -100% 0;
    color: #534168;
}
body{
    padding: 20px 0;
    background-color: #fdfdfd;
}
article {
   max-width: 500px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 20px;
    font-family:'Merriweather', serif;
    color: #353535;
    font-weight: 400;
    line-height: 1.6;
}
section {
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
}
article:last-child section {
    border-bottom: 0;
    padding-bottom: 0;
}
p:first-of-type {
    text-indent: 15px;
    margin-top: 5px;
}
a {
    color: #534168;
    transition: color 0.5s ease-out;
    -webkit-transition: color 0.5s ease-out;
}
a:hover, a:focus {
    color: #7958a3;
}
span.meta{
    display: block;
    margin: 5px 0;
    line-height: 1.6;
    color: #aea8b5;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.5px;
}
.read-more {
    text-align: right;
}
.read-more a {
    font-family:'Raleway', sans-serif;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    left: 0;
    transition: left 0.5s ease-out, color 0.5s ease-out;
    -webkit-transition: left 0.3s ease-out, color 0.5s ease-out;
}
.read-more a:after {
    content: ' \00bb';
    opacity: 0.5;
    left:...

JavaScript

/**
 * INLINE TEXT HOVER EFFECTS
 */