Tailwind CSS Modal - Nuanxa
Komponen modal digunakan untuk menampilkan informasi penting atau prompt kepada pengguna. Komponen ini dapat dengan mudah dikustomisasi dan mendukung berbagai gaya.
Default modal
Komponen modal dasar dengan perilaku dan tata letak standar.
<!-- Modal toggle -->
<button
data-modal-target="modal-example2"
class="px-3 py-2 w-full text-sm font-semibold rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:text-blue-50 dark:hover:bg-blue-400 transition"
>
Toggle modal
</button>
<!-- Main modal -->
<div
id="modal-example2"
data-modal-static
class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 backdrop-blur-sm transition-opacity duration-300"
>
<!-- Modal content -->
<div
data-modal-content
class="bg-white dark:bg-gray-800 rounded-xl shadow-xl w-full max-w-md mx-4 transform scale-95 opacity-0 transition-all duration-300"
>
<!-- Modal header -->
<div
class="flex justify-between items-center p-4 border-b border-gray-200 dark:border-gray-700"
>
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">
Why is Nuanxa provided for free?
</h2>
<button
data-modal-close
class="text-gray-500 hover:text-gray-800 dark:hover:text-gray-300"
>
<i class="fa-solid fa-xmark text-xl"></i>
</button>
</div>
<!-- Modal body -->
<div class="p-4 text-gray-700 dark:text-gray-200">
Nuanxa is provided for free to ensure that everyone can easily use
interactive components based on Tailwind CSS without having to create them
from scratch, thus speeding up website development and encouraging
community usage.
</div>
<!-- Modal footer -->
<div
class="flex justify-end gap-2 p-4 border-t border-gray-200 dark:border-gray-700"
>
<button
data-modal-close
class="px-3 py-2 text-sm font-semibold rounded-md border border-gray-500 text-gray-700 hover:bg-gray-600 hover:text-white dark:border-gray-400 dark:text-gray-300 dark:hover:bg-gray-500 dark:hover:text-white transition"
>
Close
</button>
<button
class="px-3 py-2 text-sm font-semibold rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:text-blue-50 dark:hover:bg-blue-400 transition"
>
Save
</button>
</div>
</div>
</div>
Static modal
Modal yang tetap berada di layar dan tidak tertutup secara otomatis.
<!-- Modal toggle -->
<button
data-modal-target="modal-example2"
class="px-3 py-2 w-full text-sm font-semibold rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:text-blue-50 dark:hover:bg-blue-400 transition"
>
Toggle modal
</button>
<!-- Main modal -->
<div
id="modal-example2"
data-modal-static
class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 backdrop-blur-sm transition-opacity duration-300"
>
<!-- Modal content -->
<div
data-modal-content
class="bg-white dark:bg-gray-800 rounded-xl shadow-xl w-full max-w-md mx-4 transform scale-95 opacity-0 transition-all duration-300"
>
<!-- Modal header -->
<div
class="flex justify-between items-center p-4 border-b border-gray-200 dark:border-gray-700"
>
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">
Why is Nuanxa provided for free?
</h2>
<button
data-modal-close
class="text-gray-500 hover:text-gray-800 dark:hover:text-gray-300"
>
<i class="fa-solid fa-xmark text-xl"></i>
</button>
</div>
<!-- Modal body -->
<div class="p-4 text-gray-700 dark:text-gray-200">
Nuanxa is provided for free to ensure that everyone can easily use
interactive components based on Tailwind CSS without having to create them
from scratch, thus speeding up website development and encouraging
community usage.
</div>
<!-- Modal footer -->
<div
class="flex justify-end gap-2 p-4 border-t border-gray-200 dark:border-gray-700"
>
<button
data-modal-close
class="px-3 py-2 text-sm font-semibold rounded-md border border-gray-500 text-gray-700 hover:bg-gray-600 hover:text-white dark:border-gray-400 dark:text-gray-300 dark:hover:bg-gray-500 dark:hover:text-white transition"
>
Close
</button>
<button
class="px-3 py-2 text-sm font-semibold rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:text-blue-50 dark:hover:bg-blue-400 transition"
>
Save
</button>
</div>
</div>
</div>
Modal with form
Modal yang berisi formulir untuk input dan pengiriman data pengguna.
<!-- Modal toggle -->
<button
data-modal-target="modal-example2"
class="px-3 py-2 w-full text-sm font-semibold rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:text-blue-50 dark:hover:bg-blue-400 transition"
>
Toggle modal
</button>
<!-- Main modal -->
<div
id="modal-example2"
data-modal-static
class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 backdrop-blur-sm transition-opacity duration-300"
>
<!-- Modal content -->
<div
data-modal-content
class="bg-white dark:bg-gray-800 rounded-xl shadow-xl w-full max-w-md mx-4 transform scale-95 opacity-0 transition-all duration-300"
>
<!-- Modal header -->
<div
class="flex justify-between items-center p-4 border-b border-gray-200 dark:border-gray-700"
>
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">
Why is Nuanxa provided for free?
</h2>
<button
data-modal-close
class="text-gray-500 hover:text-gray-800 dark:hover:text-gray-300"
>
<i class="fa-solid fa-xmark text-xl"></i>
</button>
</div>
<!-- Modal body -->
<div class="p-4 text-gray-700 dark:text-gray-200">
Nuanxa is provided for free to ensure that everyone can easily use
interactive components based on Tailwind CSS without having to create them
from scratch, thus speeding up website development and encouraging
community usage.
</div>
<!-- Modal footer -->
<div
class="flex justify-end gap-2 p-4 border-t border-gray-200 dark:border-gray-700"
>
<button
data-modal-close
class="px-3 py-2 text-sm font-semibold rounded-md border border-gray-500 text-gray-700 hover:bg-gray-600 hover:text-white dark:border-gray-400 dark:text-gray-300 dark:hover:bg-gray-500 dark:hover:text-white transition"
>
Close
</button>
<button
class="px-3 py-2 text-sm font-semibold rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:text-blue-50 dark:hover:bg-blue-400 transition"
>
Save
</button>
</div>
</div>
</div>
Modal with profile
Modal yang menampilkan informasi profil pengguna dalam tata letak terstruktur.
<!-- Modal toggle -->
<button
data-modal-target="modal-example2"
class="px-3 py-2 w-full text-sm font-semibold rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:text-blue-50 dark:hover:bg-blue-400 transition"
>
Toggle modal
</button>
<!-- Main modal -->
<div
id="modal-example2"
data-modal-static
class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 backdrop-blur-sm transition-opacity duration-300"
>
<!-- Modal content -->
<div
data-modal-content
class="bg-white dark:bg-gray-800 rounded-xl shadow-xl w-full max-w-md mx-4 transform scale-95 opacity-0 transition-all duration-300"
>
<!-- Modal header -->
<div
class="flex justify-between items-center p-4 border-b border-gray-200 dark:border-gray-700"
>
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">
Why is Nuanxa provided for free?
</h2>
<button
data-modal-close
class="text-gray-500 hover:text-gray-800 dark:hover:text-gray-300"
>
<i class="fa-solid fa-xmark text-xl"></i>
</button>
</div>
<!-- Modal body -->
<div class="p-4 text-gray-700 dark:text-gray-200">
Nuanxa is provided for free to ensure that everyone can easily use
interactive components based on Tailwind CSS without having to create them
from scratch, thus speeding up website development and encouraging
community usage.
</div>
<!-- Modal footer -->
<div
class="flex justify-end gap-2 p-4 border-t border-gray-200 dark:border-gray-700"
>
<button
data-modal-close
class="px-3 py-2 text-sm font-semibold rounded-md border border-gray-500 text-gray-700 hover:bg-gray-600 hover:text-white dark:border-gray-400 dark:text-gray-300 dark:hover:bg-gray-500 dark:hover:text-white transition"
>
Close
</button>
<button
class="px-3 py-2 text-sm font-semibold rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:text-blue-50 dark:hover:bg-blue-400 transition"
>
Save
</button>
</div>
</div>
</div>