JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel dui condimentum quam euismod accumsan sed at mi. Curabitur scelerisque turpis id enim placerat interdum interdum purus adipiscing. Nam pretium mauris eget sapien convallis mollis. Mauris aliquet quam eget augue tincidunt facilisis. Vivamus blandit adipiscing metus, non ornare ipsum sollicitudin ac. In vehicula, nibh vel ornare mattis, magna urna molestie sem, id fermentum leo mi at lacus. Pellentesque ante quam, blandit et rhoncus sed.</div>

<div>Duis aliquet auctor est sit amet commodo. Phasellus id sem ipsum, at auctor odio. Nulla purus dui, tempor at adipiscing eget, sodales a ante. Vestibulum nibh neque, egestas nec lacinia vitae, sagittis quis turpis. Fusce et neque enim, in eleifend ligula. Nullam ornare egestas auctor. Sed magna leo, congue sed rhoncus elementum, semper commodo mi. Nam eu elementum erat. In in tortor et velit eleifend mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra, orci vel adipiscing auctor, ante nisi gravida est, sit amet sodales augue enim at libero. Morbi iaculis, lectus non luctus tincidunt, lectus lectus ultricies ipsum, eget scelerisque dolor nisi sit amet ipsum. Morbi elit nisl, facilisis sit amet vestibulum ac, fermentum nec elit. Phasellus tortor diam, posuere tincidunt vestibulum vel, mattis sed augue.</div>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel dui condimentum quam euismod accumsan sed at mi. Curabitur scelerisque turpis id enim placerat interdum interdum purus adipiscing. Nam pretium mauris eget sapien convallis mollis. Mauris aliquet quam eget augue tincidunt facilisis. Vivamus blandit adipiscing metus, non ornare ipsum sollicitudin ac. In vehicula, nibh vel ornare mattis, magna urna molestie sem, id fermentum leo mi at lacus. Pellentesque ante quam, blandit et rhoncus sed, lacinia non eros. Donec facilisis hendrerit ante posuere pulvinar. Quisque non tellus ipsum. Maecenas non elit...

CSS

div {
    width: 300px;
    margin: 20px;
    background: #f1f1f1;
    padding: 5px;
    border: 1px solid #e1e1e1;
}

.highlight {
    background: #FFBA79;
}

JavaScript

$('div:first-child')
    .delay(300)
    .addClass("highlight", 100, 
function() {
    $('div:first-child').delay(500).removeClass("highlight", 1400);
});