Developer-Friendly Tailwind Application Components

Navigation With Icons

<nav x-data="{open :fasle}" class="shadow-dark-mild relative flex w-full flex-wrap items-center justify-between bg-zinc-50 py-2 lg:py-4" data-twe-navbar-ref>
  <div class="flex w-full flex-wrap items-center justify-between px-3">
    <div class="relative flex items-center">
      
      <a class="ps-2 text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none" href="#">
        <span class="[&>svg]:w-5">
          <i class="fa-solid fa-cart-shopping h-4 w-4"></i>
        </span>
      </a>
      
      <a class="ps-2 text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none" href="#">
        <span class="[&>svg]:w-5">
          <i class="fa-brands fa-twitter h-4 w-4"></i>
        </span>
      </a>

<div class="relative" data-twe-dropdown-ref>
        <a class="flex items-center px-2 text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none" href="#" type="button" id="dropdownMenuButton2" data-twe-dropdown-toggle-ref aria-expanded="false">
          <span class="[&>svg]:h-5 [&>svg]:w-5">
            <i class="fa-solid fa-user h-4 w-4"></i>
          </span>
          <span class="[&>svg]:w-5" @click="open = !open">
            <i class="fa-solid fa-chevron-down h-4 w-4"></i>
          </span>
        </a>
        <ul x-show="open" class="absolute z-[1000] float-left m-0 min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg data-[twe-dropdown-show]:block" aria-labelledby="dropdownMenuButton1" data-twe-dropdown-menu-ref>
          <li>
            <a class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline" href="#" data-twe-dropdown-item-ref>Action</a>
          </li>
          <li>
            <a class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline" href="#" data-twe-dropdown-item-ref>Another action</a>
          </li>
          <li>
            <a class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline" href="#" data-twe-dropdown-item-ref>Something else here</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

<js-component src="application/navigation_with_icons"></js-component>

Admin Pannel Form

View

<div class="bg-gray-100">
  <div class="header flex h-16 items-center justify-between border-b-2 border-gray-200 bg-white px-10 py-8">
    <div class="flex items-center space-x-2 text-gray-400">
      <span class="text-md font-thin tracking-wider text-green-700"><a href="#">Home</a></span>
      <span>/</span>
      <span class="text-md tracking-wide">
        <span class="text-base">Categories</span>
      </span>
      <span>/</span>
    </div>
  </div>
  <div class="header my-3 flex h-12 items-center justify-between px-10">
    <h1 class="text-2xl font-medium">All Categories</h1>
  </div>
  <div class="mx-3 mt-6 flex flex-col lg:flex-row">
    <div class="m-1 w-full lg:w-1/3">
      <form class="w-full bg-white p-6 shadow-md">
        <div class="-mx-3 mb-6 flex flex-wrap">
          <div class="mb-6 w-full px-3 md:w-full">
            <label class="mb-2 block text-sm font-bold uppercase tracking-wide text-gray-700" htmlFor="category_name">Category Name</label>
            <input class="block w-full appearance-none rounded-lg border border-gray-400 bg-white px-3 py-3 font-medium leading-tight text-gray-900 focus:border-[#98c01d] focus:outline-none" type="text" name="name" placeholder="Category Name" required />
          </div>
          <div class="mb-6 w-full px-3">
            <textarea textarea rows="4" class="block w-full appearance-none rounded-lg border border-gray-400 bg-white px-3 py-3 font-medium leading-tight text-gray-900 focus:border-[#98c01d] focus:outline-none" type="text" name="description" required> </textarea>
          </div>

<div class="mb-6 w-full px-3 md:w-full">
            <button class="block w-full appearance-none rounded-lg border border-gray-200 bg-green-700 px-3 py-3 font-bold leading-tight text-gray-100 hover:bg-green-600 focus:border-gray-500 focus:bg-white focus:outline-none">Add Category</button>
          </div>

<div class="mb-8 w-full px-3">
            <label class="mx-auto flex w-full max-w-lg cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed border-green-400 bg-white p-6 text-center" htmlFor="dropzone-file">
              <i class="fa-solid fa-cloud-arrow-up h-28 w-28 text-green-800"></i>
              <h2 class="mt-4 text-xl font-medium tracking-wide text-gray-700">Category image</h2>

<p class="mt-2 tracking-wide text-gray-500">Upload or drag & drop your file SVG, PNG, JPG or GIF.</p>

<input id="dropzone-file" type="file" class="hidden" name="category_image" accept="image/png, image/jpeg, image/webp" />
            </label>
          </div>
        </div>
      </form>
    </div>
    <div class="m-1 w-full rounded-sm border border-gray-200 bg-white text-lg shadow-lg lg:w-2/3">
      <div class="overflow-x-auto rounded-lg p-3">
        <table class="w-full table-auto">
          <thead class="mx-auto bg-gray-50 p-1 text-sm font-semibold uppercase text-gray-800">
            <tr>
              <th></th>
              <th>
                <i class="fa-solid fa-file mx-auto h-5 w-5 fill-current"></i>
              </th>
              <th class="p-2">
                <div class="font-semibold">Category</div>
              </th>
              <th class="p-2">
                <div class="text-left font-semibold">Description</div>
              </th>
              <th class="p-2">
                <div class="text-center font-semibold">Action</div>
              </th>
            </tr>
            <tr>
              <td>1</td>
              <td><img src="https://images.pexels.com/photos/25652584/pexels-photo-25652584/free-photo-of-elegant-man-wearing-navy-suit.jpeg?auto=compress&cs=tinysrgb&w=400" class="mx-auto h-8 w-8" /></td>
              <td>Sample Name</td>
              <td>Sample Description</td>
              <td class="p-2">
                <div class="flex justify-center">
                  <a href="#" class="flex items-center justify-between rounded-md p-2 text-green-600 hover:bg-green-100">
                    <span><FaEdit class="mr-1 h-4 w-4" /> </span> Edit
                  </a>
                  <button class="flex items-center justify-between rounded-md p-2 text-red-600 hover:bg-red-100">
                    <span><FaTrash class="mr-1 h-4 w-4" /></span> Delete
                  </button>
                </div>
              </td>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </div>
</div>

<js-component src="application/admin_pannel_form"></js-component>

Frequently Asked Questions

View

<div class="mx-auto mt-32 h-screen max-w-5xl px-2 py-3 tracking-wide md:mt-44 md:px-4">
  
  <h2 class="flex justify-center text-3xl">Frequently Asked Questions</h2>

<div class="grid gap-3 py-8 text-lg leading-6 text-gray-800 md:grid-cols-2 md:gap-8">
    <div class="space-y-3">
      
      <div x-data="accordion(1)" class="relative rounded-xl border transition-all duration-700 hover:shadow-2xl">
        <div @click="handleClick()" class="w-full cursor-pointer p-4 text-left">
          <div class="flex items-center justify-between">
            <span class="tracking-wide">What is x-data ?</span>
            <span :class="handleRotate()" class="transform fill-current transition-transform duration-500">
              <i class="fa-solid fa-chevron-down h-5 w-5 fill-current"></i>
            </span>
          </div>
        </div>

<div x-ref="tab" :style="handleToggle()" class="relative max-h-0 overflow-hidden transition-all duration-700">
          <div class="px-6 pb-4 text-gray-600">Declare a new Alpine component and its data for a block of HTML</div>
        </div>
      </div>

<div x-data="accordion(2)" class="relative rounded-xl border transition-all duration-700 hover:shadow-2xl">
        <div @click="handleClick()" class="w-full cursor-pointer p-4 text-left">
          <div class="flex items-center justify-between">
            <span class="tracking-wide">What is x-bind ?</span>
            <span :class="handleRotate()" class="transform fill-current transition-transform duration-500">
              <i class="fa-solid fa-chevron-down h-5 w-5 fill-current"></i>
            </span>
          </div>
        </div>

<div x-ref="tab" :style="handleToggle()" class="relative max-h-0 overflow-hidden transition-all duration-700">
          <div class="px-6 pb-4 text-gray-600">Dynamically set HTML attributes on an element.</div>
        </div>
      </div>
      
    </div>

<div class="space-y-3">
      
      <div x-data="accordion(3)" class="relative rounded-xl border transition-all duration-700 hover:shadow-2xl">
        <div @click="handleClick()" class="w-full cursor-pointer p-4 text-left">
          <div class="flex items-center justify-between">
            <span class="tracking-wide">What is $store ?</span>
            <span :class="handleRotate()" class="transform fill-current transition-transform duration-500">
              <i class="fa-solid fa-chevron-down h-5 w-5 fill-current"></i>
            </span>
          </div>
        </div>

<div x-ref="tab" :style="handleToggle()" class="relative max-h-0 overflow-hidden transition-all duration-700">
          <div class="px-6 pb-4 text-gray-600">Access a global store registered using Alpine.store(...)</div>
        </div>
      </div>

<div x-data="accordion(4)" class="relative rounded-xl border transition-all duration-700 hover:shadow-2xl">
        <div @click="handleClick()" class="w-full cursor-pointer p-4 text-left">
          <div class="flex items-center justify-between">
            <span class="tracking-wide">What is x-on ?</span>
            <span :class="handleRotate()" class="transform fill-current transition-transform duration-500">
              <i class="fa-solid fa-chevron-down h-5 w-5 fill-current"></i>
            </span>
          </div>
        </div>

<div x-ref="tab" :style="handleToggle()" class="relative max-h-0 overflow-hidden transition-all duration-700">
          <div class="px-6 pb-4 text-gray-600">Listen for browser events on an element</div>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

Alpine.data("accordion", (idx) => ({
      init() {
      this.idx = idx;
      },
      idx: -1,
      handleClick() {
      this.$store.accordion.tab =
          this.$store.accordion.tab === this.idx ? 0 : this.idx;
      },
      handleRotate() {
      return this.$store.accordion.tab === this.idx ? "-rotate-180" : "";
      },
      handleToggle() {
      return this.$store.accordion.tab === this.idx
          ? `max-height: ${this.$refs.tab.scrollHeight}px`
          : "";
      }
  }));
  });
  //  end faq
</script>

<js-component src="application/frequently_asked_questions"></js-component>

Card Link

View

<js-component src="application/card_link"></js-component>

Image Link

View

<div x-data="{currentYear: new Date().getFullYear()}" class="max-w-sm rounded-lg border border-gray-200 bg-white shadow-md">
  <a href="#">
    <img class="rounded-t-lg" src="https://picsum.photos/500/300" alt="image 1" />
  </a>
  <div class="p-5">
    <a href="#">
      <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">Jamstacker technology acquisitions <span x-text="currentYear"></span></h5>
    </a>
    <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of <span x-text="currentYear"></span> so far, in reverse chronological order.</p>
    <a href="#" class="inline-flex items-center rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300">
      Read more
      <svg class="ms-2 h-3.5 w-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
      </svg>
    </a>
  </div>
</div>

<js-component src="application/image_link"></js-component>

Modal With CRUD

View

<div x-data="{open: false}" class="flex w-full flex-col">
  
  <div class="inset-0 flex">
    <button @click="open = !open" data-modal-target="crud-modal" data-modal-toggle="crud-modal" class="block rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300" type="button">Toggle modal</button>
  </div>

<div x-show="open" id="crud-modal" tabindex="-1" aria-hidden="true" class="fixed left-0 right-0 top-0 z-50 h-[calc(100%-1rem)] max-h-full w-full items-center justify-center overflow-y-auto overflow-x-hidden md:inset-0">
    <div class="relative max-h-full w-full max-w-md p-4">
      
      <div class="relative rounded-lg bg-white shadow">
        
        <div class="flex items-center justify-between rounded-t border-b p-4 md:p-5">
          <h3 class="text-lg font-semibold text-gray-900">Create New Product</h3>
          <button @click="open =false" type="button" class="ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900" data-modal-toggle="crud-modal">
            <i class="fa-solid fa-xmark h-3 w-3"></i>
            <span class="sr-only">Close modal</span>
          </button>
        </div>
        
        <form class="p-4 md:p-5">
          <div class="mb-4 grid grid-cols-2 gap-4">
            <div class="col-span-2">
              <label for="name" class="mb-2 block text-sm font-medium text-gray-900">Name</label>
              <input type="text" name="name" id="name" class="focus:ring-primary-600 focus:border-primary-600 d block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900" placeholder="Type product name" required="" />
            </div>
            <div class="col-span-2 sm:col-span-1">
              <label for="price" class="mb-2 block text-sm font-medium text-gray-900">Price</label>
              <input type="number" name="price" id="price" class="focus:ring-primary-600 focus:border-primary-600 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900" placeholder="$2999" required="" />
            </div>
            <div class="col-span-2 sm:col-span-1">
              <label for="category" class="mb-2 block text-sm font-medium text-gray-900">Category</label>
              <select id="category" class="focus:ring-primary-500 focus:border-primary-500 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900">
                <option selected="">Select category</option>
                <option value="TV">TV/Monitors</option>
                <option value="PC">PC</option>
                <option value="GA">Gaming/Console</option>
                <option value="PH">Phones</option>
              </select>
            </div>
            <div class="col-span-2">
              <label for="description" class="mb-2 block text-sm font-medium text-gray-900">Product Description</label>
              <textarea id="description" rows="4" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500" placeholder="Write product description here"></textarea>
            </div>
          </div>
          <button type="submit" class="flex place-items-center rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300">
            <i class="fa-solid fa-plus -ms-1 me-1 h-4 w-5"></i>
            Add new product
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

<js-component src="application/modal_with_crud"></js-component>

Modal With Progress Bar

View

<div x-data="{open: false}" class="flex h-full w-full flex-col">
  
  <div class="inset-0 flex">
    <button @click="open = !open" data-modal-target="progress-modal" data-modal-toggle="progress-modal" class="block rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300" type="button">Toggle modal</button>
  </div>

<div x-show="open" id="progress-modal" tabindex="-1" aria-hidden="true" class="fixed left-0 right-0 top-0 z-50 h-[calc(100%-1rem)] max-h-full w-full items-center justify-center overflow-y-auto overflow-x-hidden md:inset-0">
    <div class="relative max-h-full w-full max-w-md p-4">
      
      <div class="relative rounded-lg bg-white shadow">
        <button @click="open = false" type="button" class="absolute end-2.5 top-3 ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900" data-modal-hide="progress-modal">
          <i class="fa-solid fa-xmark h-3 w-3"></i>
          <span class="sr-only">Close modal</span>
        </button>
        <div class="p-4 md:p-5">
          <i class="fa-solid fa-database mb-4 h-10 w-10 text-gray-400"></i>

<h3 class="mb-1 text-xl font-bold text-gray-900">Approaching Full Capacity</h3>
          <p class="mb-6 text-gray-500">Choosing the right server storage solution is essential for maintaining data integrity.</p>
          <p></p>
          <div class="mb-1 flex justify-between text-gray-500">
            <span class="text-base font-normal">My storage</span>
            <span class="text-sm font-semibold text-gray-900">376,3 of 500 GB used</span>
          </div>
          <div class="h-2.5 w-full rounded-full bg-gray-200">
            <div class="h-2.5 rounded-full bg-orange-500" style="width: 85%"></div>
          </div>
          
          <div class="mt-6 flex items-center space-x-4 rtl:space-x-reverse">
            <button @click="open = false" data-modal-hide="progress-modal" type="button" class="rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300">Upgrade to PRO</button>
            <button @click="open = false" data-modal-hide="progress-modal" type="button" class="rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100">Cancel</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<js-component src="application/modal_with_progress_bar"></js-component>

Popup Modal With Buttons

View

<div x-data="{open: false}" class="flex h-full w-full flex-col items-center justify-center">
  <button @click="open = !open" data-modal-target="popup-modal" data-modal-toggle="popup-modal" class="block rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300" type="button">Toggle modal</button>

<div x-show="open" id="popup-modal" tabindex="-1" class="z-50h-[calc(100%-1rem)] fixed left-0 right-0 top-0 max-h-full w-full items-center justify-center overflow-y-auto overflow-x-hidden md:inset-0">
    <div class="relative max-h-full w-full max-w-md p-4">
      <div class="relative rounded-lg bg-white shadow">
        <button @click="open = false" type="button" class="absolute end-2.5 top-3 ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900" data-modal-hide="popup-modal">
          <i class="fa-solid fa-xmark h-3 w-3"></i>
          <span class="sr-only">Close modal</span>
        </button>
        <div class="p-4 text-center md:p-5">
          <i class="fa-duotone fa-light fa-circle-exclamation mx-auto mb-4 h-12 w-12 text-gray-400"></i>
          <h3 class="mb-5 text-lg font-normal text-gray-500">Are you sure you want to delete this product?</h3>
          <button @click="open = false" data-modal-hide="popup-modal" type="button" class="inline-flex items-center rounded-lg bg-red-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300">Yes, I'm sure</button>
          <button @click="open = false" data-modal-hide="popup-modal" type="button" class="ms-3 rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100">No, cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>

<js-component src="application/popup_modal_with_buttons"></js-component>

Crypto Wallet Modal

View

<div class="flex h-full w-full flex-col justify-center" x-data="{open: false}">
  <div class="inset-0 flex">
    <button @click="open =!open" type="button" data-modal-target="crypto-modal" data-modal-toggle="crypto-modal" class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-100">
      <i class="fa-solid fa-link me-2 h-4 w-4"></i>
      Connect wallet
    </button>
  </div>

<div x-show="open" id="crypto-modal" tabindex="-1" aria-hidden="true" class="fixed left-0 right-0 top-0 z-50 h-[calc(100%-1rem)] max-h-full w-full items-center justify-center overflow-y-auto overflow-x-hidden md:inset-0">
    <div class="relative max-h-full w-full max-w-md p-4">
      
      <div class="relative rounded-lg bg-white shadow">
        
        <div class="flex items-center justify-between rounded-t border-b p-4 md:p-5">
          <h3 class="text-lg font-semibold text-gray-900">Connect wallet</h3>
          <button @click="open = false" type="button" class="ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900" data-modal-toggle="crypto-modal">
            
            <i class="fa-solid fa-xmark w3-3 h-3"></i>
            <span class="sr-only">Close modal</span>
          </button>
        </div>
        
        <div class="p-4 md:p-5">
          <p class="text-sm font-normal text-gray-500">Connect with one of our available wallet providers or create a new one.</p>
          <ul class="my-4 space-y-3">
            <li>
              <a href="#" class="group flex items-center rounded-lg bg-gray-50 p-3 text-base font-bold text-gray-900 hover:bg-gray-100 hover:shadow">
                <i class="fa-solid fa-paw h-5"></i>
                <span class="ms-3 flex-1 whitespace-nowrap">MetaMask</span>
                <span class="ms-3 inline-flex items-center justify-center rounded bg-gray-200 px-2 py-0.5 text-xs font-medium text-gray-500">Popular</span>
              </a>
            </li>
            <li>
              <a href="#" class="group flex items-center rounded-lg bg-gray-50 p-3 text-base font-bold text-gray-900 hover:bg-gray-100 hover:shadow">
                <i class="fa-brands fa-gg-circle h-5 fill-sky-400"></i>
                <span class="ms-3 flex-1 whitespace-nowrap">Coinbase Wallet</span>
              </a>
            </li>

<li>
              <a href="#" class="group flex items-center rounded-lg bg-gray-50 p-3 text-base font-bold text-gray-900 hover:bg-gray-100 hover:shadow">
                <i class="fa-solid fa-cloud h-5"></i>
                <span class="ms-3 flex-1 whitespace-nowrap">WalletConnect</span>
              </a>
            </li>
            <li>
              <a href="#" class="group flex items-center rounded-lg bg-gray-50 p-3 text-base font-bold text-gray-900 hover:bg-gray-100 hover:shadow">
                <i class="fa-brands fa-gg h-5"></i>
                <span class="ms-3 flex-1 whitespace-nowrap">Fortmatic</span>
              </a>
            </li>
          </ul>
          <div>
            <a href="#" class="inline-flex items-center text-xs font-normal text-gray-500 hover:underline">
              <i class="fa-regular fa-circle-question me-2 h-3 w-3"></i>
              Why do I need to connect with my wallet?</a
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<js-component src="application/crypto_wallet_modal"></js-component>

Table Filters

View

<div class="flex h-full w-full flex-col">
  <div class="mb-4 flex flex-col items-center gap-4 md:flex-row md:justify-between">
    <input type="text" placeholder="Search..." class="w-full rounded border border-gray-300 px-4 py-2 outline-none focus:ring focus:ring-blue-200 md:w-1/3" />
    <select class="w-full rounded border border-gray-300 px-4 py-2 focus:outline-none focus:ring focus:ring-blue-200 md:w-1/4">
      <option value="">Filter by Category</option>
      <option value="category1">Category 1</option>
      <option value="category2">Category 2</option>
      <option value="category3">Category 3</option>
    </select>
    <button class="w-full rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus:ring focus:ring-blue-200 md:w-auto">Apply Filters</button>
  </div>
  <table class="min-w-full border border-gray-200 bg-white">
    <thead>
      <tr>
        <th class="px-4 py-2 text-left">Name</th>
        <th class="px-4 py-2 text-left">Category</th>
        <th class="px-4 py-2 text-left">Date</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="border-t px-4 py-2">Item 1</td>
        <td class="border-t px-4 py-2">Category 1</td>
        <td class="border-t px-4 py-2">01/01/2023</td>
      </tr>
      <tr>
        <td class="border-t px-4 py-2">Item 2</td>
        <td class="border-t px-4 py-2">Category 2</td>
        <td class="border-t px-4 py-2">02/01/2023</td>
      </tr>
    </tbody>
  </table>
  <div class="mt-4 md:mt-0" x-data="{ open: false }">
    <button @click="open = !open" class="text-blue-600 underline focus:outline-none">Toggle Filter Details</button>
    <div x-show="open" class="mt-2 border-t border-gray-200 pt-2">
      <p class="text-sm">Additional filter options will be displayed here when toggled.</p>
    </div>
  </div>
</div>

<js-component src="application/table_filters"></js-component>