Developer-Friendly Tailwind General Components

Latest Tailwind Components

Responsive HTML building blocks for marketing, applications, dashboards and more.

Offcanvas

<div class="relative">
  <button x-data="{ open: false }" @click="open = !open" class="px-4 py-2 bg-blue-600 text-white focus:outline-none">
    Toggle Offcanvas
  </button>
  <div x-data="{ open: false }" :class="{'translate-x-0': open, '-translate-x-full': !open}" x-transition:enter="transition transform ease-out duration-300" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition transform ease-out duration-300" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" class="fixed top-0 left-0 h-full w-64 bg-gray-100 transform -translate-x-full">
    <button @click="open = false" class="absolute top-2 right-2 text-black">
      ✕
    </button>
    <nav class="mt-10">
      <ul class="space-y-4">
        <li><a href="#" class="block px-4 py-2 text-black hover:bg-gray-200">Home</a></li>
        <li><a href="#" class="block px-4 py-2 text-black hover:bg-gray-200">About</a></li>
        <li><a href="#" class="block px-4 py-2 text-black hover:bg-gray-200">Services</a></li>
        <li><a href="#" class="block px-4 py-2 text-black hover:bg-gray-200">Contact</a></li>
      </ul>
    </nav>
  </div>
</div>

<js-component src="general/offcanvas"></js-component>

Modals

View

<js-component src="general/modals"></js-component>