Developer-Friendly Tailwind Application Components

Modal With CRUD

<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>

Form in Modal

View

<div x-show="open" class="fixed inset-0 bg-gray-800 bg-opacity-50 flex items-center justify-center">
    <div @click.away="open = false" class="bg-white p-6 rounded-lg w-full max-w-lg">
      <h2 class="text-lg font-bold mb-4">User Input Form</h2>
      <form>
        <div class="mb-4">
          <label class="block text-sm mb-2" for="name">Name</label>
          <input type="text" id="name" class="w-full px-3 py-2 border border-gray-300 rounded" placeholder="Enter your name">
        </div>
        <div class="mb-4">
          <label class="block text-sm mb-2" for="email">Email</label>
          <input type="email" id="email" class="w-full px-3 py-2 border border-gray-300 rounded" placeholder="Enter your email">
        </div>
        <div class="mb-4">
          <label class="block text-sm mb-2" for="message">Message</label>
          <textarea id="message" class="w-full px-3 py-2 border border-gray-300 rounded" placeholder="Type your message"></textarea>
        </div>
        <div class="flex justify-end">
          <button @click.prevent="open = false" type="button" class="mr-2 px-4 py-2 bg-gray-200 rounded">Cancel</button>
          <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded">Submit</button>
        </div>
      </form>
    </div>
  </div>
</div>

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

Alert Dialog

View

<div class="fixed z-10 inset-0 overflow-y-auto" x-data="{ open: false }" x-show="open">
    <div class="flex items-center justify-center min-h-screen">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75" aria-hidden="true"></div>
        <div class="bg-white rounded-lg text-left overflow-hidden transform transition-all sm:max-w-lg sm:w-full">
            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div class="sm:flex sm:items-start">
                    <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                        <svg class="h-6 w-6 text-red-600" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" aria-hidden="true">
                            <path fill-rule="evenodd" d="M8.257 3.099c.366-.446.957-.719 1.57-.719h.346a.753.753 0 0 1 .743.669l.007.084.688 9h-4.79l.688-9a.75.75 0 0 1 1.48-.034L9.5 3.5zM9 14a1 1 0 1 0 2 0 1 1 0 0 0-2 0zm0 3a2 2 0 1 1 4 0 2 2 0 0 1-4 0z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                        <h3 class="text-lg leading-6 font-medium text-black" id="modal-title">
                            Delete product
                        </h3>
                        <div class="mt-2">
                            <p class="text-sm text-black">
                                Are you sure you want to delete this product? This action cannot be undone.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button @click="open = false" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-black hover:bg-gray-50 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
                    Cancel
                </button>
                <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
                    Delete
                </button>
            </div>
        </div>
    </div>
</div>
<button @click="open = true" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:ring focus:ring-blue-300">Open Alert</button>

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

Confirmation Dialog

View

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

Modal Dialog

View

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