Accessible Modal Component - Copy this Html, Tailwind Component to your project
crud model and from this button <div class="p-6 h-auto w-full"> <button type="button" id="defaultModalButton" data-modal-target="defaultModal" data-modal-toggle="defaultModal" class="relative cursor-pointer group w-full focus:outline-none"> <!-- Background Layer --> <span class="absolute top-0 left-0 w-full h-full mt-1 px-2 bg-gray-800 rounded-lg transition-all duration-300 group-hover:bg-gray-700" aria-hidden="true"></span> <!-- Button Content --> <div class="relative p-4 bg-white border-2 border-gray-800 rounded-lg transition-all duration-300 group-hover:border-gray-700 group-hover:shadow-lg"> <div class="flex flex-col items-start"> <div class="flex items-center mb-2"> <span class="text-lg transition-transform duration-300 group-hover:rotate-12" aria-hidden="true">😎</span> <h3 class="ml-2 text-base font-semibold text-gray-800 group-hover:text-gray-600"> Ajukan Permohonan Secara Online! </h3> </div> <p class="text-gray-600 text-sm group-hover:text-gray-500"> Proses pengajuan Anda dengan mudah dan cepat secara online. </p> </div> </div> </button> </div>
