MiniJS

AirBnB Search Bar:

Active State Example:

With TailwindCSS classes

          
<script>
  activeTab = 'Company';
</script>

<nav class="isolate flex divide-x divide-gray-200 rounded-lg shadow" aria-label="Tabs">
  <a :class="activeTab == 'My Account' ? 'text-gray-900' : 'text-gray-500' " :click="activeTab = 'My Account'"
      class=" rounded-l-lg group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10"
      aria-current="page">
  <span>My Account</span>
  <span :class="activeTab == 'My Account' ? 'bg-indigo-500' : 'bg-transparent'" aria-hidden="true"
      class="absolute inset-x-0 bottom-0 h-0.5"></span>
  </a>

  <a :class="activeTab == 'Company' ? 'text-gray-900' : 'text-gray-500' " :click="activeTab = 'Company'"
      class="hover:text-gray-700 group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10">
  <span>Company</span>
  <span :class="activeTab == 'Company' ? 'bg-indigo-500' : 'bg-transparent'" aria-hidden="true"
      class="absolute inset-x-0 bottom-0 h-0.5"></span>
  </a>

  <a :class="activeTab == 'Team Members' ? 'text-gray-900' : 'text-gray-500' "
      :click="activeTab = 'Team Members'"
      class="hover:text-gray-700 group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10">
  <span>Team Members</span>
  <span :class="activeTab == 'Team Members' ? 'bg-indigo-500' : 'bg-transparent'" aria-hidden="true"
      class="absolute inset-x-0 bottom-0 h-0.5"></span>
  </a>

  <a :class="activeTab == 'Billing' ? 'text-gray-900' : 'text-gray-500' " :click="activeTab = 'Billing'"
      class="hover:text-gray-700 rounded-r-lg group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10">
  <span>Billing</span>
  <span :class="activeTab == 'Billing' ? 'bg-indigo-500' : 'bg-transparent'" aria-hidden="true"
      class="absolute inset-x-0 bottom-0 h-0.5"></span>
  </a>
</nav>

On Change Example:

Input:

Hello World

            
<div>
  <div class="flex flex-col">
    <p class="font-bold font-mono text-sm">Input:</p>
    <input :change="inputValue = this.value" :value="inputValue" value="Hello World" type="text" name="text" class="px-3 max-w-sm block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
  </div>
  <h2 class="ml-3 mt-2 text-lg font-medium font-mono" :text="inputValue">Hello World</h2>
</div>

Checkbox:

OFF

            
<div>
  <input :change="checkboxValue = this.checked" :checked="checkboxValue" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600">
  <h2 class="ml-2 text-sm font-semibold font-mono" :text="checkboxValue ? 'ON' : 'OFF' "></h2>
</div>

Select:

Selected: Canada

            
<div>
  <div class="flex flex-col">
    <p class="font-bold font-mono text-sm">Select:</p>
    <select :value="selectedCountry ||= 'Canada' " :change="selectedCountry = this.value" name="location" class="w-full rounded-md border-0 py-2 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
      <option>United States</option>
      <option>Canada</option>
      <option>Mexico</option>
    </select>
  </div>

  <p class="ml-4">Selected: <span class="font-bold" :text="selectedCountry"></span></p>
</div>

Custom Select:

            
  <div>
    <div :clickout="showSelect = false"  class="relative mt-2 max-w-sm">
      <button :click="showSelect = !showSelect" type="button" >
        <span :text="selectedOption">Select</span>
      </button>

      <ul :class="showSelect ? 'opacity-100' : 'opacity-0 hidden'" class="absolute w-full bg-white rounded p-2">
        <li :click="selectedOption = 'Option 1'" :class="selectedOption = 'Option 1' ? 'active' : 'inactive'">Option 1</li>
        <li :click="selectedOption = 'Option 2'" :class="selectedOption = 'Option 2' ? 'active' : 'inactive'">Option 2</li>
      </ul>

      <input type="hidden" :vale="selectedOption"/>
    </div>
  </div>

Storing to Local Storage:

Loading...

          
<div>
  <input :value="$storedValue" :change="$storedValue = this.value" value="Update and Reload" type="text" name="text" class="px-3 max-w-sm block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
  <h2  :text="$storedValue">Update and Reload</h2>
</div>

Multi Select:

Selected Tags:

x

          
<script>
   allTags = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']; 
   filteredTags = []; 
   selectedTags = [];
   selectedTag = null;
   searchQuery = '';
</script>

<input
   type="text"
   class="w-full py-2 px-2"
   :change="searchQuery = this.value;
   filteredTags = allTags.subtract(selectedTags).search(searchQuery);
   selectedTag = filteredTags.first"
   :keyup.enter="selectedTags.add(selectedTag);
   filteredTags.remove(selectedTag);
   selectedTag = filteredTags.first"
   :keyup.up="selectedTag = filteredTags.previousItem(selectedTag)"
   :keyup.down="selectedTag = filteredTags.nextItem(selectedTag)"
/>

<div :clickout="filteredTags = []; selectedTag = null" :class="filteredTags.length ? '' : 'hidden' "  class="bg-white rounded">
   <p class="p-3 font-mono font-semibold mb-2 pb-1 border-b-2 border-gray-500 border-dashed">Search Result:</p>
   <div :each="tag in filteredTags">
      <div
         :click="selectedTags.add(tag);
         filteredTags.remove(selectedTag);
         selectedTag = filteredTags.first"
         :mouseover="selectedTag = tag"
         :class="selectedTag == tag ? 'bg-blue-100 text-blue-700' : 'text-gray-700'"
         class="font-mono font-semibold py-2 px-3 rounded cursor-pointer hover:bg-blue-100 hover:text-blue-700"
         >
         <span :text="tag"></span>
      </div>
   </div>
</div>

<p class="mt-2">Selected Tags:</p>
<div class="flex items-center space-x-2" :each="tag in selectedTags">
   <div class="flex items-center py-0.5 px-2 rounded-full bg-blue-100 text-blue-700" >
      <span :text="tag" class="font-semibold font-mono text-xs"></span>
      <span
         class="px-2 py-1 text-xs text-blue-800 font-semibold ml-2 cursor-pointer rounded-full hover:bg-red-200 hover:text-red-600"
         :click="selectedTags.remove(tag);
         filteredTags = allTags.subtract(selectedTags).search(searchQuery);
         selectedTag = filteredTags.first"
         >
      x
      </span>
   </div>
</div>

Alert Dialog:

Your account has been deleted.

          
<script>
  userId = 1;
</script>

<button
  type="button"
  class="py-1.5 px-3 text-base text-red-700 rounded-lg shadow-sm bg-red-100 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600"
  :class="userId ? '' : 'hidden'"
  :click="$('#dialog').showModal()"
  >
Delete Account
</button>

<p class="text-base text-gray-900" :class="userId == null ? '' : 'hidden'">
  Your account has been deleted.
  <button
      type="button"
      :click="userId = 1"
      class="py-1.5 px-3 text-base text-gray-900 rounded-lg shadow-sm bg-white hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
      >
  Reset
  </button>
</p>

<dialog id="dialog" class="p-4 rounded-lg max-w-sm">
  <form
      class="flex flex-col gap-3"
      :submit="event.preventDefault();
      userId = null;
      this.closest('dialog').close()"
      >
      <h1 class="text-lg text-gray-900 font-bold">
        Are you sure you want to delete your account?
      </h1>
      <p class="text-base text-gray-700">
        This action cannot be undone. This will permanently delete your account and remove all your data.
      </p>
      <div class="flex justify-end gap-2">
        <button
            type="button"
            :click="this.closest('dialog').close()"
            class="py-1.5 px-3 text-base text-gray-900 rounded-lg shadow-sm bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
            >
        Cancel
        </button>
        <button
            type="submit"
            class="py-1.5 px-3 text-base text-red-700 rounded-lg shadow-sm bg-red-100 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600"
            >
        Yes, delete my account
        </button>
      </div>
  </form>
</dialog>

Dialog:

Your Name:

Username:

          
<script>
  firstName = 'John';
  lastName = 'Doe';
  username = 'johndoe';
</script>

<div class="flex flex-col gap-4 max-w-sm">
  <div class="flex justify-between gap-4">
      <p :text="`Hello ${firstName}`"></p>
      <button
        id="edit-profile-btn"
        type="button"
        class="inline-block w-max py-1.5 px-3 text-base text-indigo-700 rounded-lg shadow-sm bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
        :click="$('#edit-profile-dialog').showModal()"
        >
      Edit Profile
      </button>
  </div>
  <dl class="grid grid-cols-2 text-sm text-gray-900">
      <dt class="font-bold">Your Name:</dt>
      <dt :text="firstName + ' ' + lastName"></dt>
      <dt class="font-bold">Username:</dt>
      <dt :text="username"></dt>
  </dl>
</div>

<dialog
  id="edit-profile-dialog"
  class="rounded-lg max-w-sm"
  :clickme="this.close()"
  >
  <form
      class="p-4 flex flex-col gap-4"
      :submit="event.preventDefault(); this.closest('dialog').close()"
      >
      <h1 class="text-xl text-gray-900 font-bold">
        Edit Profile
      </h1>
      <div class="flex flex-col gap-2">
        <div class="grid grid-cols-3 items-center gap-4">
            <label class="text-right text-base">
            First Name
            </label>
            <input
              type="text"
              name="first_name"
              class="col-span-2 py-1.5 px-2 text-base text-gray-900 rounded-lg shadow-sm bg-gray-100 border border-gray-200 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
              :value="firstName"
              :change="firstName = this.value"
              />
        </div>
        <div class="grid grid-cols-3 items-center gap-4">
            <label class="text-right text-base">
            Last Name
            </label>
            <input
              type="text"
              name="last_name"
              class="col-span-2 py-1.5 px-2 text-base text-gray-900 rounded-lg shadow-sm bg-gray-100 border border-gray-200 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
              :value="lastName"
              :change="lastName = this.value"
              />
        </div>
        <div class="grid grid-cols-3 items-center gap-4">
            <label class="text-right text-base">
            Username
            </label>
            <input
              type="text"
              name="username"
              class="col-span-2 py-1.5 px-2 text-base text-gray-900 rounded-lg shadow-sm bg-gray-100 border border-gray-200 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
              :value="username"
              :change="username = this.value"
              />
        </div>
      </div>
      <div class="flex justify-end gap-2">
        <button
            type="button"
            :click="this.closest('dialog').close()"
            class="py-1.5 px-3 text-base text-gray-900 rounded-lg shadow-sm bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
            >
        Cancel
        </button>
        <button
            type="submit"
            class="py-1.5 px-3 text-base text-indigo-700 rounded-lg shadow-sm bg-indigo-100 hover:bg-indigo-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
            >
        Update Profile
        </button>
      </div>
  </form>
</dialog>

Tonic Dialog:

Open Modal

          
<style>
  .shimmer {
    background: #f6f7f8;
    background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-repeat: no-repeat;
    background-size: 800px 100px; 
    position: relative; 
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-name: placeholderShimmer;
    animation-timing-function: linear;
  }
  @keyframes placeholderShimmer {
    0% {
      background-position: -468px 0;
    }
    100% {
      background-position: 468px 0; 
    }
  }
</style>

<script>
  isModalOpen = false;
</script>

<a
  class="bg-indigo-600 hover:bg-indigo-800 transition-all text-white rounded px-3 py-2 cursor-pointer"
  :click="isModalOpen = true;
          const loader = document.createElement('div');
          loader.className = 'shimmer h-32 w-full';
          loader.style.minWidth = '300px';
          const modalContent = $('#modal-container-content');
          modalContent.innerHTML = loader.outerHTML;"
  >
Open Modal
</a>

<div
  id="modal-outer"
  class="relative z-10 duration-300 transition-all opacity-0"
  aria-labelledby="modal-title"
  aria-modal="true"
  :class="isModalOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'"
>
  <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
  <div
    id="modal-inner"
    class="transition-all fixed inset-0 z-10 overflow-y-auto"
    :class="isModalOpen ? 'opacity-100 translate-y-0 sm:scale-100' : 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'"
  >
      <div
        id="modal-container-outer" class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
        :clickme="isModalOpen = false"
      >
        <div class="relative">
            <button
              style="left:-30px; top:2rem"
              class="hidden md:block cursor-pointer absolute"
              :click="isModalOpen = false"
              aria-label="Close Modal"
              >
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </button>
            <div id="modal-container-content" class="overflow-y-scroll rounded-lg bg-white max-h-96 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:w-96 sm:p-6">
            </div>
        </div>
      </div>
  </div>
</div>