JSFiddle - React, Tailwind, and code Playground

by adelura

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/button.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.css">
<button id="btn" class="ui right labeled icon green button">
<span id="text">Add card</span>
<i id="icon" class="right plus icon"></i>
</button>

<button class="ui labeled button" style="opacity: 0;">
<i class="plus icon"></i>
</button>

CSS

#btn {
  min-width: 180px;
}

JavaScript

btn.addEventListener('click', () => {
	btn.classList.add('loading');
  setTimeout(() => {
  	btn.classList.remove('loading');
    text.textContent = 'Card added';
    icon.classList.remove('plus');
    icon.classList.add('check');
    
    setTimeout(() => {
        icon.classList.remove('check');
        icon.classList.add('plus');
        text.textContent = 'Add card';
    }, 1200);
  }, 300);
});