JSFiddle - React, Tailwind, and code Playground

by cidermill

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="control-button-wrapper">

  <button id="saveButton" class="ok btn no-text btn-icon"><i class="fa fa-check d-icon d-icon-check"></i></button>
  <button id="cancelButton" class="cancel btn no-text btn-icon"><i class="fa fa-times d-icon d-icon-times"></i></button>
  <button id="resetButton" class="btn btn-icon-text ember-view reset-button"><i class="fa fa-undo d-icon d-icon-undo"></i><span class="d-button-label">reset</span></button>

  <div id="loadingIndicator" class="btn btn-icon no-text loading-indicator"><i class="fa fa-cog fa-spin"></i></div>

</div>

<br>
<hr>
<a id="resetDemoButton">reset demo</a>

CSS

.btn {
  display: inline-block;
  margin: 0;
  padding: 6px 12px;
  font-weight: 500;
  font-size: 1em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s
}

.btn:active,
.btn.btn-active {
  text-shadow: none
}

.btn[disabled],
.btn.disabled {
  cursor: default;
  opacity: 0.4
}

.btn .fa {
  margin-right: 7px
}

.btn.no-text .fa {
  margin-right: 0
}

.btn.hidden {
  display: none
}

.btn {
  border: none;
  color: #222;
  font-weight: normal;
  background: #e9e9e9
}

.btn[href] {
  color: #222
}

.btn:hover,
.btn.btn-hover {
  background: #919191;
  color: #fff
}

.btn[disabled],
.btn.disabled {
  background: #e9e9e9;
  cursor: not-allowed
}

.btn[disabled]:hover,
.btn.disabled:hover {
  color: #bdbdbd
}

.btn .d-icon {
  opacity: 0.7;
  line-height: 1.2
}

.btn.btn-primary .d-icon {
  opacity: 1
}

.btn-primary {
  border: none;
  font-weight: normal;
  color: #fff;
  background: #08c
}

.btn-primary[href] {
  color: #fff
}

.btn-primary:hover,
.btn-primary.btn-hover {
  color: #fff;
  background: #08c
}

.btn-primary:active,
.btn-primary.btn-active {
  background-color: #08c;
  background-image: linear-gradient(to bottom, #08c, #08c);
  color: #fff
}

.btn-primary[disabled],
.btn-primary.disabled {
  background: #08c
}

.btn-danger {
  color: #fff;
  font-weight: normal;
  background: #e45735
}

.btn-danger[href] {
  color: #fff
}

.btn-danger:hover,
.btn-danger.btn-hover {
  background: #c63c1b
}

.btn-danger:active,
.btn-danger.btn-active {
  background-color: #c63c1b;
  background-image: linear-gradient(to bottom, #c63c1b, #e45735)
}

.btn-danger[disabled],
.btn-danger.disabled {
  background: #e45735
}

.btn-social {
  color: #fff
}

.btn-social:hover {
  color: #fff
}

.btn-social[href] {
  color: #fff
}

.btn-social:before {
  margin-right: 9px;
  font-family: FontAwesome;
  font-size: 1em
}

.btn-social.google,
.btn-social.google_oauth2 {
  background:...

JavaScript

saveButton = document.getElementById('saveButton');
    cancelButton = document.getElementById('cancelButton');
    loadingIndicator = document.getElementById('loadingIndicator');
    resetButton = document.getElementById('resetButton');

    function save() {
      saveButton.style.display = 'none';
      cancelButton.style.display = 'none';
      loadingIndicator.style.display = 'inline-block';
      resetButton.style.display = 'none';
      setTimeout(function (){
        loadingIndicator.firstChild.classList.remove('fa-cog');
        loadingIndicator.firstChild.classList.remove('fa-spin');
        loadingIndicator.firstChild.classList.add('fa-check-square');
        setTimeout(function (){
          loadingIndicator.classList.add('slide-out-left');
          loadingIndicator.classList.add('inline-block');
          setTimeout(function(){
            loadingIndicator.style.display = 'none';
            resetButton.classList.add('slide-in-right');
            resetButton.style.display = 'inline-block';
          }, 300);
        }, 500);
      }, 300);
    }

    function resetDemo() {
      saveButton.style.display = 'inline-block';
      cancelButton.style.display = 'inline-block';
      loadingIndicator.style.display = 'none';
      resetButton.style.display = 'none';
      loadingIndicator.classList.remove('slide-out-left');
      resetButton.classList.remove('slide-in-right');
      loadingIndicator.firstChild.classList.remove('fa-check-square');
      loadingIndicator.firstChild.classList.add('fa-cog');
      loadingIndicator.firstChild.classList.add('fa-spin');
    } 

    saveButton.addEventListener('click', function() { save() }, false);
    resetDemoButton.addEventListener('click', function() { resetDemo() }, false);
    resetButton.addEventListener('click', function() { alert('This would reset the field to its default value.') }, false);