JSFiddle - React, Tailwind, and code Playground

by Simplybj

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="btn-group">
  <button type="button" class="btn-core" rel="grid">
    Grid
  </button>

  <button type="button" class="btn-core" rel="list">
    List
  </button>
</div>

<div class="group">
  <p>
    this is a paragraph
  </p>
</div>

SCSS

.btn-group {
  border: 1px solid red;
  padding: 20px 30px;
  margin: 0 0 20px;
}
.list {
  background: red;
}
.grid {
  background: black;
}

.group {
  border: 1px solid black;
  padding: 30px;
}

JavaScript

$('.btn-core').click(function() {
  var sortClass = $(this).attr('rel');

  $('.group').attr('class', 'group ' + sortClass);
});