JSFiddle - React, Tailwind, and code Playground

by rajtri

HTML

<div class="btn-group ">
  <button id="actives" type="button">Actives</button>
  <button id="inactives" type="button">Inactives</button>
  <button id="all" type="button">All</button>
</div>

<div id="apiDiv" style="display: none">
  <cfloop array="#apis#" index="api">
    <div class="card card-found">
      <div class="card-header">
        <cfif Len(api.iconClass)>
          <i class="fa fa-fw #api.iconClass#"></i>
        </cfif>
        
      </div>
      <div class="card-body">
        <p>Your Detail</p>
      </div>
      <div class="card-button">
        <input class="#inputClass# ace ace-switch ace-switch-3" name="#inputName#" id="#inputId#-#api.id#" type="checkbox"  value="#HtmlEditFormat( api.id )#" tabindex="#getNextTabIndex()#">
        <span class="lbl"></span>
      </div>
    </div>
  </cfloop>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100vh;
}

.container {
    height: 100vh;
    display: grid;
    grid-template: "header header header" 5rem 
                   "sidebar main main" auto / 8rem auto;
  }
  
  nav {
    grid-area: header;
    grid-column-end: span 3;
    background: green;
  }

  .sidebar {
    height: 100%;
    grid-area: sidebar;
    background: gold;
  }
  
  main {
    height: 100%;
    grid-area: main;
    grid-column-end: span 2;
    background: skyblue;
  }

JavaScript

$(document).ready(function(){
	$('#actives').click(function(){
  		$('#apiDiv').show();
  });
 	$('#inactives').click(function(){
  		$('#apiDiv').hide();
  });
  
});