TailwindTemplates

Category

Modal

Lexicon Confirmation Message

Copied!

                    
                         <div class="shadow-lg rounded p-8 bg-white">
  <p class="font-light text-gray-700 leading-relaxed">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore repellendus
    iure rerum ratione aliquam nulla cupiditate amet deleniti ut a laboriosam
    debitis, vel dicta quisquam consectetur! Consectetur repellendus maiores
    quis.
  </p>
  <div class="flex items-center justify-end mt-4">
    <button
      class="py-2 px-4 bg-white border border-gray-200 text-gray-600 rounded hover:bg-gray-100 active:bg-gray-200 disabled:opacity-50 mr-4"
    >
      Cancel
    </button>
    <button
      class="py-2 px-4 bg-white border border-gray-200 text-gray-600 rounded hover:bg-gray-100 active:bg-gray-200 disabled:opacity-50"
    >
      Ok
    </button>
  </div>
</div>
                    
                

Biings modal

Copied!

                    
                         <div class="rounded-lg bg-white shadow-lg p-16">
  <div class="flex justify-center">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-10 w-10 text-indigo-800"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"
      />
    </svg>
  </div>

  <div class="text-center mt-2">
    <h1 class="text-purple-900 font-bold text-2xl">Modal Card Example</h1>
    <p class="text-gray-500 mt-3">
      You could also insert centered tabs to make this modal even more
      versatile.
    </p>

    <div class="mt-6">
      <ul
        class="flex justify-center space-x-6 text-indigo-800 border-b border-purple-50"
      >
        <li class="border-b-2 pb-3 border-indigo-600">One</li>
        <li>Two</li>
        <li>Forty Six</li>
      </ul>
    </div>

    <div class="py-8 border-b border-indigo-50">
      Content
    </div>
  </div>

  <div class="flex justify-center mt-8">
    <button
      class="text-white py-2 px-4 rounded-lg bg-purple-700 hover:bg-purple-600 shadow-md font-medium  transition-colors"
    >
      Save
    </button>
  </div>
</div>