Modal Footer Using Tailwind UI

Modal footer with a unique style inspired by Ersad’s design on Twitter, implemented with Tailwind CSS using a slicing component approach.
modal
Loading component...
index.html
94 lines
<div class="bg-gray-100">
  <h1 class="text-center font-bold pt-10 text-3xl">Modal Footer Component</h1>
  <div class="py-10 flex flex-col gap-5 items-center w-full">
    <div
      class="flex flex-row overflow-hidden w-full sm:w-5/12 items-center justify-center bg-white py-4 px-2 sm:px-8 rounded-sm space-x-4">
      <button
        class="w-full inline-flex font-medium text-sm items-center justify-center border border-gray-200 px-1 py-2 rounded-lg cursor-pointer text-gray-600 hover:border-blue-200 hover:text-white hover:bg-blue-200">
        Cancel
      </button>
      <button
        class="w-full inline-flex font-medium text-sm items-center justify-center border border-blue-600 bg-blue-600 px-1 py-2 rounded-lg cursor-pointer text-gray-50 hover:bg-blue-900">
        Upload
      </button>
    </div>

    <div
      class="flex flex-row overflow-hidden w-full sm:w-5/12 items-center justify-end bg-white py-4 px-2 sm:px-8 rounded-sm space-x-4">
      <button
        class="inline-flex font-medium text-sm items-center justify-center border border-gray-200 px-4 py-2 rounded-lg cursor-pointer text-gray-600 hover:border-blue-200 hover:text-white hover:bg-blue-200">
        Cancel
      </button>
      <button
        class="inline-flex font-medium text-sm items-center justify-center border border-blue-600 bg-blue-600 px-4 py-2 rounded-lg cursor-pointer text-gray-50 hover:bg-blue-900">
        Upload
      </button>
    </div>

    <div
      class="flex flex-row overflow-hidden w-full md:w-5/12 items-center justify-between bg-white py-4 px-2 sm:px-8 rounded-sm">
      <div>
        <div class="flex items-start">
          <div class="flex items-center h-5">
            <input id="terms" aria-describedby="terms" type="checkbox"
              class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
              required="">
          </div>
          <div class="ml-3 text-sm">
            <label for="terms" class="font-semibold text-gray-800 dark:text-gray-300">Dont's show it again</label>
          </div>
        </div>
      </div>
      <div class="flex items-center space-x-4">
        <button
          class="inline-flex font-medium text-sm items-center justify-center border border-gray-200 px-4 py-2 rounded-lg cursor-pointer text-gray-600 hover:border-blue-200 hover:text-white hover:bg-blue-200">
          Cancel
        </button>
        <button
          class="inline-flex font-medium text-sm items-center justify-center border border-blue-600 bg-blue-600 px-4 py-2 rounded-lg cursor-pointer text-gray-50 hover:bg-blue-900">
          Upload
        </button>
      </div>
    </div>

    <div
      class="flex flex-row overflow-hidden w-full md:w-5/12 items-center justify-between bg-white py-4 px-2 sm:px-8 rounded-sm">
      <div>
        <div class="flex justify-center items-center space-x-2 mt-4">
          <span class="w-2 h-2 rounded-full bg-blue-800 cursor-pointer"></span>
          <span class="w-2 h-2 rounded-full bg-gray-400 cursor-pointer hover:bg-blue-800"></span>
          <span class="w-2 h-2 rounded-full bg-gray-400 cursor-pointer hover:bg-blue-800"></span>
          <!-- Add more dots as needed -->
        </div>
      </div>
      <div class="flex items-center space-x-4">
        <button
          class="inline-flex font-medium text-sm items-center justify-center border border-gray-200 px-4 py-2 rounded-lg cursor-pointer text-gray-600 hover:border-blue-200 hover:text-white hover:bg-blue-200">
          Cancel
        </button>
        <button
          class="inline-flex font-medium text-sm items-center justify-center border border-blue-600 bg-blue-600 px-4 py-2 rounded-lg cursor-pointer text-gray-50 hover:bg-blue-900">
          Upload
        </button>
      </div>
    </div>

    <div
      class="flex flex-row overflow-hidden w-full md:w-5/12 items-center justify-between bg-white py-4 px-2 sm:px-8 rounded-sm">
      <div>
        <a href="#" class="underline text-gray-800 text-sm font-medium hover:text-blue-800">Link Buttton</a>
      </div>
      <div class="flex items-center space-x-4">
        <button
          class="inline-flex font-medium text-sm items-center justify-center border border-gray-200 px-4 py-2 rounded-lg cursor-pointer text-gray-600 hover:border-blue-200 hover:text-white hover:bg-blue-200">
          Cancel
        </button>
        <button
          class="inline-flex font-medium text-sm items-center justify-center border border-blue-600 bg-blue-600 px-4 py-2 rounded-lg cursor-pointer text-gray-50 hover:bg-blue-900">
          Upload
        </button>
      </div>
    </div>

  </div>
</div>
Modal Footer Using Tailwind UI

Preview - Modal Footer Using Tailwind UI
