table layout

by Imri Paloja

HTML

<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-eb-dark text-white md-4 p-4 md:table-fixed">
<table class="table-auto bg-eb-dark border border-gray-800 backdrop-blur-sm shadow-md p-4">
  <thead>
    <tr class="bg-eb-gray border border-gray-800">
      <th class="p-4">Song</th>
      <th class="p-4">Artist</th>
      <th class="p-4">Year</th>
    </tr>
  </thead>
  <tbody>
    <tr class="bg-eb-gray border border-gray-800">
      <td class="p-4">The Sliding Mr. Bones (Next Stop, Pottersville)</td>
      <td class="p-4">Malcolm Lockyer</td>
      <td class="p-4">1961</td>
    </tr>
    <tr class="bg-eb-gray border border-gray-800">
      <td class="p-4">Witchy Woman</td>
      <td class="p-4">The Eagles</td>
      <td class="p-4">1972</td>
    </tr>
    <tr class="bg-eb-gray border border-gray-800">
      <td class="p-4">Shining Star</td>
      <td class="p-4">Earth, Wind, and Fire</td>
      <td class="p-4">1975</td>
    </tr>
  </tbody>
</table>
</div>

Tailwind CSS

textarea {
  min-width: 250px;
  width: 450px;
  max-width: 100%;

  min-height: 250px;
  height: 100%;
  max-height: 450px;
}

JavaScript

tailwind.config = {
  theme: {
    extend: {
      colors: {
        'eb-red': '#e60000',
        'eb-dark': '#1b1e1f',
        'eb-gray': '#181a1b',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
};

// show the target element
//collapse.expand();

// hide the target element
//collapse.collapse();

// toggle the visibility of the target element
//collapse.toggle();

function toggleUserMenu() {
  // set the target element that will be collapsed or expanded (eg. navbar menu)
  const $targetEl = document.getElementById('user-dropdown');

  targetEl.toggle();

  // optionally set a trigger element (eg. a button, hamburger icon)
  const $triggerEl = document.getElementById('user-menu-button');

  // optional options with default values and callback functions
  const options = {
    onCollapse: () => {
      console.log('element has been collapsed');
    },
    onExpand: () => {
      console.log('element has been expanded');
    },
    onToggle: () => {
      console.log('element has been toggled');
    },
  };

  const instanceOptions = {
    id: 'user-dropdown',
    override: true,
  };

  collapse.toggle();
}