JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<link rel="stylesheet" href="https://beat.today/stylesheets/style.css">
<!-- <div class="enrolled-wrapper">
  <ul class="enrolled-list shifted-list no-style">
    <li class="item user_photo small shadow">
      <img src="http://lorempixel.com/48/48/people/a" alt="">
    </li>

    <li class="item user_photo small shadow">
      <img src="http://lorempixel.com/48/48/people/b" alt="">
    </li>

    <li class="item user_photo small shadow">
      <img src="http://lorempixel.com/48/48/people/c" alt="">
    </li>
  </ul>
</div>
 -->

<div class="enrolled-wrapper">

  <button class="button round hollow gray label-button">
    <i class="icon"></i>
    <span class="text">
      Enroll
    </span>
  </button>
  <button class="button round hollow gray label-button loading">
    <i class="icon"></i>
    <span class="text loading-text text-dark">
      Enrolling...
    </span>
  </button>
  
  <button class="button round hollow gray label-button">
      <img class="icon" src="http://files.softicons.com/download/web-icons/bwpx.icns-icons-by-paul-armstrong-designs/png/18x18/flag.png">
  </button>

  <ul class="enrolled-list shifted-list no-style text-right">
    <li class="item user_photo small shadow">
      <img src="http://lorempixel.com/48/48/people/a" alt="">
    </li>

    <li class="item user_photo small shadow">
      <img src="http://lorempixel.com/48/48/people/b" alt="">
    </li>

    <li class="item user_photo small shadow">
      <img src="http://lorempixel.com/48/48/people/c" alt="">
    </li>
  </ul>
</div>

<br>

<button class="button round hollow blue label-button">
  <i class="icon"></i>
  <span class="text">
    Enroll
  </span>
</button>

<br>
<br>

<button class="button round hollow green label-button small">
  <i class="icon"></i>
  <span class="text">
    Enroll
  </span>
</button>

CSS

/* TEMP */

body{
  padding: 50px;
}

.label-button .icon{
  background: silver;
  border-radius: 50px;
}

.button.loading > .loading-text{
  display: initial;
}

button:not(.loading) .loading-text ,
*:not(.loading) > .loading-text{
	display: none;
}

/* TEMP END */

.enrolled-wrapper .enrolled-list{
  display: inline-block;
  vertical-align: top;
  line-height: 40px;
  height: 40px;
}

/* Shifted List */

.shifted-list {}

.shifted-list .item {
  display: inline-block;
  transition: 0.2s ease-out;
}

.shifted-list:not(:hover) .item:not(:last-child) {
  margin-right: -14px;
}

/* Shifted List END */

.button.hollow{
    background: transparent;
}

.button.round{
  border-radius: 20px;
}

.button.hollow.gray {
    box-shadow: inset 0 0 0 1px #E2E8EA;
}

.button.hollow.gray:not(.loading):hover {
    box-shadow: inset 0 0 0 1px #E2E8EA, inset 0 0 0 1000px #f2f3f4;
}

.button.hollow.gray:not(.loading):active {
    box-shadow: inset 0 0 0 1px #E2E8EA, inset 0 0 0 1000px #E2E8EA;
}

.button.hollow.blue {
  box-shadow: inset 0 0 0 1px #2C9EE4;
  color: #2C9EE4;
}

.button.hollow.blue:not(.loading):hover,
.button.hollow.blue:not(.loading):focus{
    background: none;
    box-shadow: inset 0 0 0 1px #2C9EE4, inset 0 0 0 1000px rgba(13, 120, 185, 0.05);
}

.button.hollow.blue:not(.loading):active {
    background: none;
    box-shadow: inset 0 0 0 1px #2C9EE4, inset 0 0 0 1000px rgba(13, 120, 185, 0.1);
}

.button.hollow.green {
  box-shadow: inset 0 0 0 1px #0DB942;
  color: #0DB942;
}

.button.hollow.green:not(.loading):hover,
.button.hollow.green:not(.loading):focus{
    background: none;
    box-shadow: inset 0 0 0 1px #0DB942, inset 0 0 0 1000px rgba(13,185,66,0.05);
}

.button.hollow.green:not(.loading):active {
    background: none;
    box-shadow: inset 0 0 0 1px #0DB942, inset 0 0 0 1000px rgba(13,185,66,0.1);
}


.button.label-button{
  width: auto;
  padding: 5px;
  height: 40px;
  min-width: 40px;
  line-height: 30px;
}

.label-button .icon{
  display:...