레이어 alert
component
지제이웍스
gjworks.dev
Components UI Examples
Workspace - Tailwind CSS Components
Components UI Examples
Code Examples<div class="popup flex fixed inset-0 h-screen bg-gray-900 opacity-75 overflow-hidden z-50"> </div> <div class="popup flex absolute top-0 items-center justify-center z-50 w-full h-full"> <div class="relative w-3/4 md:max-w-md rounded-xl bg-gray-50 shadow-xl"> <div class="flex items-center justify-center absolute -right-3 -top-3 rounded-full p-3 w-8 h-8 bg-gray-200 text-gray-600 text-block shadow text-lg"> <i class="fas fa-times"></i> </div> <div class=" p-5"> <div class="flex justify-center pt-5"> <div class="flex items-center justify-center bg-blue-200 w-12 h-12 rounded-full text-blue-700 text-2xl"> <i class="fas fa-check"></i></div> </div> <div class="text-center p-6 text-xl text-gray-800"> 홈페이지가 리뉴얼 작업중입니다. </div> </div> <div class="bg-gray-100 rounded-b-xl overflow-hidden"> <div class="flex"> <a href="javascript:alert('ghk')" class="block flex-1 text-center py-3 text-sm text-blue-700 bg-blue-100 hover:bg-blue-200 cursor-pointer"> 확인 </a> <a href="javascript:void(0)" class="popup-close block flex-1 text-center py-3 text-sm text-red-700 bg-red-100 hover:bg-red-200 cursor-pointer" data-close="popup"> 취소 </a> </div> </div> </div> </div>