EuroCMS default modules page

by Imri Paloja

HTML

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

<div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
    <div class="flex items-center justify-between flex-column md:flex-row flex-wrap space-y-4 md:space-y-0 p-4">
        <div>
            <button id="dropdownDefaultButton2" data-dropdown-toggle="dropdown-2" class="inline-flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary shadow-xs font-medium leading-5 rounded-base text-sm px-3 py-2 focus:outline-none" type="button">
                Action
                <svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
            </button>
            <!-- Dropdown menu -->
            <div id="dropdown-2" class="z-10 hidden bg-neutral-primary-medium border border-default-medium rounded-base shadow-lg w-32">
                <ul class="p-2 text-sm text-body font-medium" aria-labelledby="dropdownDefaultButton2">
                <li>
                    <a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Reward</a>
                </li>
                <li>
                    <a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Promote</a>
                </li>
                <li>
                    <a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Archive</a>
                </li>
                <li>
                    <a href="#" class="inline-flex items-center w-full p-2 text-fg-danger...

JavaScript

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

window.onload = function () {
  const anchorTags = document.querySelectorAll('a');
  anchorTags.forEach(function (a) {
    a.addEventListener('click', function (ev) {
      ev.preventDefault();
    });
  });
  const dropdownEl = document.querySelector('[data-dropdown-toggle]');
  if (dropdownEl) {
    dropdownEl.click();
  }
  const modalEl = document.querySelector('[data-modal-toggle]');
  if (modalEl) {
    modalEl.click();
  }
  const dateRangePickerEl = document.querySelector('[data-rangepicker] input');
  if (dateRangePickerEl) {
    dateRangePickerEl.focus();
  }
  const drawerEl = document.querySelector('[data-drawer-show]');
  if (drawerEl) {
    drawerEl.click();
  }
};