.container { @apply flex min-h-full items-center justify-center p-4 text-center; } .panel { @apply relative bg-slate-600 rounded max-w-xl w-full mx-auto shadow-lg text-left; @apply ring-4 ring-slate-800 ring-opacity-80; } .title { @apply font-header text-xl font-medium mb-2 text-slate-50 pr-4; } .close_icon { @apply w-5 h-5 group-hover:rotate-90 transition-transform duration-100; } .dialog_icon { @apply flex items-center justify-center w-10 h-10 rounded-full mr-4; &.danger { @apply bg-red-500 text-red-50; } &.warning { @apply bg-yellow-600 text-yellow-50; } &.success { @apply bg-green-600 text-green-50; } &.info { @apply bg-primary-500 text-primary-50; } }