JSFiddle - React, Tailwind, and code Playground

by matox

HTML

<div class="content">
  <div class="main-container">
    <div class="toolbar-container">
      <button class="toggle-filter">📜</button>
    </div>
    <div class="table-container">
      <div class="table">
        <table>
          <thead>
            <th>Name</th>
            <th>Cluster</th>
            <th>Policy</th>
            <th>Compliancy</th>
            <th></th>
          </thead>
          <tbody>
            <tr>
              <td>vm1</td>
              <td>cluster1</td>
              <td>policy1</td>
              <td>compliancy1</td>
              <td>
                <button class="show-details">🔍</button>
              </td>
            </tr>
            <tr>
              <td>vm1</td>
              <td>cluster1</td>
              <td>policy1</td>
              <td>compliancy1</td>
              <td>
                <button class="show-details">🔍</button>
              </td>
            </tr>
            <tr>
              <td>vm1</td>
              <td>cluster1</td>
              <td>policy1</td>
              <td>compliancy1</td>
              <td>
                <button class="show-details">🔍</button>
              </td>
            </tr>
            <tr>
              <td>vm1</td>
              <td>cluster1</td>
              <td>policy1</td>
              <td>compliancy1</td>
              <td>
                <button class="show-details">🔍</button>
              </td>
            </tr>
            <tr>
              <td>vm1</td>
              <td>cluster1</td>
              <td>policy1</td>
              <td>compliancy1</td>
              <td>
                <button class="show-details">🔍</button>
              </td>
            </tr>
            <tr>
              <td>vm1</td>
              <td>cluster1</td>
              <td>policy1</td>
              <td>compliancy1</td>
              <td>
                <button class="show-details">🔍</button>
              </td>
            </tr>
            <tr>
              <td>vm1</td>
        ...

SCSS

.content {
	display: flex;
	background: #f1c40f;
	height: 100vh;
  max-height: 100vh;
	.main-container {
	  min-height: 100vh;
		flex-basis: 100%;
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		.toolbar-container {
		  height: auto;
			display: flex;
			justify-content: flex-end;
			background: #1abc9c;
		}
		.table-container {
		  height: 100vh;
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			background: #3498db;
			.table {
				height: 100vh;
        width: 100%;
				flex-basis: auto;
				overflow-y: auto;
				text-align: center;
			}
			.details {
				height: 200px;
				background: #e74c3c;
			}
		}
	}
	.filters-container {
		flex-basis: 300px;
		height: 100vh;
		background: #9b59b6;
	}
}

JavaScript

$(document).ready(function() {
  $(".toggle-filter").click(function() {
    if ($(".filters-container").length > 0) {
      $(".filters-container").remove();
    } else {
      $('.content').append('<div class="filters-container">FILTERS</div>');
    }
  });
  $(".show-details").click(function() {
    if ($(".details").length > 0) {
      $(".details").remove();
    } else {
      $('.table-container').append('<div class="details">DETAILS</div>');
    }
  });
});