JSFiddle - React, Tailwind, and code Playground

by godsnake

HTML

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
  

  
  
  <div id="box2" class="">
    <h3>Box 2</h3>
      
    <ul class="d-inline-block">
    <div id="message">You've reached the maximum of 3 Roles allowed.</div>
    <li> <a class="btn btn-outline-primary">Link</a> </li>
    <li> <a class="btn btn-outline-primary">Link</a> </li>
    <li> <a class="btn btn-outline-primary">Link</a> </li>
    <li> <a class="btn btn-outline-primary">Link</a> </li>
    <li> <a class="btn btn-outline-primary">Link</a> </li>
    <li> <a class="btn btn-outline-primary">Link</a> </li>
    </ul>
  </div>
  

  
</div>

CSS

ul {
 list-style-type: none;
 }

li {
  display: inline-block;
}

a{color:#000; }

a .active {background:#0d58a6; color:#fff; text-decoration:none;}





#message{display:none;text-align:left;padding:5px;color:red;margin:0px;}

JavaScript

$(document).ready(function(){

  var limit = 3;
  $("ul li").on("click", "a", function(e){
    e.preventDefault();
    
    if($("a.active").length >= limit) {
      $("#message").slideDown();
      if($(this).hasClass("active"))
      {
      $(this).toggleClass("active");
       $("#message").slideUp();
      }
      
    }else{
     $("#message").slideUp();
     $(this).toggleClass("active");
    }
  });

});