JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<table>
  <thead>
    <th>
      Data
    </th>
    <th>
      Tipo
    </th>
    <th>
      Participantes
    </th>
    <th>
      Preço individual
    </th>
  </thead>
  <tbody>
    <tr>
      <td>
        01/03
      </td>
      <td>
        Weed
      </td>
      <td>
        JG, JP, JS, AM
      </td>
      <td>
        €1.88
      </td>
    </tr>
    <tr>
      <td>
        01/03
      </td>
      <td>
        Weed
      </td>
      <td>
        JG, JP, JS, AM
      </td>
      <td>
        €1.88
      </td>
    </tr>
  </tbody>
</table>

<button>
  Adicionar +
</button>

<div class="serafim">
  <div class="serafim_body">

    <div class="serafim_body_section">
      <div class="serafim_body_row">
        <div class="type_pill_select pill_select">
          <div class="pill_select_option is-selected" data-value="">
            Weed
          </div>
          <div class="pill_select_option" data-value="">
            Brown
          </div>
        </div>

      </div>
    </div>

    <div class="serafim_body_section">
      <div class="serafim_body_row">
        <div class="who_pill_select pill_select is-shake">
          <div class="pill_select_option" data-value="JG">
            JG
          </div>

          <div class="pill_select_option" data-value="AM">
            AM
          </div>

          <div class="pill_select_option" data-value="JS">
            JS
          </div>
          <div class="pill_select_option" data-value="JP">
            JP
          </div>
        </div>
      </div>

      <div class="serafim_body_section">
        <div class="serafim_main_actions">
          <button class="serafim_submit_btn btn btn--main btn--fw">Acender</button>
          <button class="t-link">Cancelar</button>
        </div>
      </div>
    </div>
  </div>

CSS

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: 0;
  font: inherit;
  color: inherit;
  background-color: transparent;
  outline: none;
}

button,
link {
  cursor: pointer;
}

html {
  font: 17px arial;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  border: 1px solid;
  text-transform: capitalize;
}

.t-link {
  border-bottom: 1px solid
}

.btn,
.pill_select_option {
  padding: .8em 0;
  text-align: center;
}

.btn {
  border-radius: 50px;
  font-weight: 600;
}

.btn--main {
  background: #ffffff;
  color: #306756;
}

.btn--fw {
  width: 100%;
}

.pill_select {
  display: flex;
  flex-wrap: wrap;
  width: 10em;
}

.pill_select_option {
  margin: 0 0 6%;
  width: 47%;
  padding: .8em 0;
  text-align: center;
  border-radius: 3px;
  font-weight: bold;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, .4);
}

.pill_select_option:nth-child(odd) {
  margin-right: 3%;
}

.pill_select_option:nth-child(even) {
  margin-left: 3%;
}

.pill_select_option.is-selected {
  background-color: #ffffffeb;
  color: rgba(12, 51, 37, 0.7);
}

.serafim {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  background: #10d49d;
}

.serafim.is-inactive {
   display: none;
}

.serafim_body {
  width: 10em;
}

.serafim_body_row {
  margin-bottom: 1.4em;
}

.serafim_main_actions {
  text-align: center;
}

.serafim_submit_btn {
  display: block;
  margin-bottom: 1.5em;
  width: 100%;
}

.participante_list {}

.is-shaking {
  animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform:...

JavaScript

var html = document.documentElement,

  date,

  type = "weed",
  $type_pill_select_optionS = $('.type_pill_select .pill_select_option'),

  who = {},
  $who_pill_select = $('.who_pill_select'),
  $who_pill_select_optionS = $who_pill_select.find('.pill_select_option'),
	
  $serafim = $('.serafim'),
  $serafim_submit_btn = $('.serafim_submit_btn'),

	$table = $('table');

$type_pill_select_optionS.on('click', function(e) {
  var $type_pill_select_option = $(e.currentTarget),
    val;

  if (!$type_pill_select_option.hasClass('is-selected')) {
    $type_pill_select_optionS.removeClass('is-selected');
    $type_pill_select_option.addClass('is-selected');
    val = $type_pill_select_option.data('value');
    type = val;
  };


});

$who_pill_select_optionS.on('click', function(e) {
  var $who_pill_select_option = $(e.currentTarget),
    val = $who_pill_select_option.data('value');

  if (who[val]) {
    delete who[val];
    $who_pill_select_option.removeClass('is-selected');

  } else {
    who[val] = 1;
    $who_pill_select_option.addClass('is-selected');
  }
	
  $who_pill_select.removeClass('is-shaking');

});


$serafim_submit_btn.on('click', function(e) {
  var month, day, _who = Object.keys(who);

  if (who.length) {
    $who_pill_select.removeClass('is-shaking');
    html.offsetHeight;
    $who_pill_select.addClass('is-shaking');
  } else {
    date = new Date();
    day = date.getDate().padStart(2, '0');
    month = date.getMonth().padStart(2, '0');
    date = day + month;
    $serafim_submit_btn.attr('disabled', true);
    
    table.append(buildTableRow());
    $serafim.addClass('is-inactive');
  }
});


function buildTableRow() {
  var $el = $('tr');
  $tr.append('<td>' + date + '</td>');
  $tr.append('<td>' + type + '</td>');

  $tr.append('<td>' + (function() {
    var str = '';

    who.forEach(function(who) {
      str += '<div class="table_avatar">' + who + '</div>';
    });

    return str;
  })() + '');

  $tr.append('<td>' + 3.5 / who.length +...