<div class="max-w-screen-sm bg-white dark:bg-gray-800 shadow-sm rounded-lg border border-gray-200 dark:border-gray-700 hover:shadow-md dark:hover:shadow-lg dark:hover:shadow-gray-800/50 transition-all duration-200">
    <div class="w-full bg-red-100 dark:bg-red-600 border-l-4 border-red-500 dark:border-red-400 text-red-800 dark:text-red-100 p-4 rounded-md shadow-sm dark:shadow-lg">
        <div class="flex items-center">
            <svg class="size-6 text-red-500 dark:text-red-400 mr-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                <path d="M9 9v-1a3 3 0 0 1 6 0v1" />
                <path d="M8 9h8a6 6 0 0 1 1 3v3a5 5 0 0 1 -10 0v-3a6 6 0 0 1 1 -3" />
                <path d="M3 13l4 0" />
                <path d="M17 13l4 0" />
                <path d="M12 20l0 -6" />
                <path d="M4 19l3.35 -2" />
                <path d="M20 19l-3.35 -2" />
                <path d="M4 7l3.75 2.4" />
                <path d="M20 7l-3.75 2.4" />
            </svg>

            <div class="flex-1">
                <p class="font-medium text-sm">
                    Error! Something went wrong. Please try again.
                </p>
            </div>

            <button class="text-red-500 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-700 rounded-lg p-1 ml-2 focus:outline-none">
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>
    </div>
</div>


<div class="max-w-screen-sm bg-white dark:bg-gray-800 shadow-sm rounded-lg border border-gray-200 dark:border-gray-700 hover:shadow-md dark:hover:shadow-lg dark:hover:shadow-gray-800/50 transition-all duration-200">
    <div class="w-full bg-green-100 dark:bg-green-600 border-l-4 border-green-500 dark:border-green-400 text-green-800 dark:text-green-100 p-4 rounded-md shadow-sm dark:shadow-lg">
        <div class="flex items-center">
            <svg class="size-6 text-green-500 mr-3"  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-circle-check"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M9 12l2 2l4 -4" /></svg>

            <div class="flex-1">
                <p class="font-medium text-sm">
                    Success! Your action was completed successfully.
                </p>
            </div>

            <button class="text-green-500 dark:text-green-400 hover:bg-green-200 dark:hover:bg-green-700 rounded-lg p-1 ml-2 focus:outline-none">
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>
    </div>
</div>

<div class="max-w-screen-sm bg-white dark:bg-gray-800 shadow-sm rounded-lg border border-gray-200 dark:border-gray-700 hover:shadow-md dark:hover:shadow-lg dark:hover:shadow-gray-800/50 transition-all duration-200">
    <div class="w-full bg-yellow-100 dark:bg-yellow-600 border-l-4 border-yellow-500 dark:border-yellow-400 text-yellow-800 dark:text-yellow-100 p-4 rounded-md shadow-sm dark:shadow-lg">
        <div class="flex items-center">
            <svg class="size-6 text-yellow-500 dark:text-yellow-400 mr-3" xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-alert-triangle"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 9v4" /><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z" /><path d="M12 16h.01" /></svg>
            
            <div class="flex-1">
                <p class="font-medium text-sm">
                    Warning! This is a sample warning message.
                </p>
            </div>
            
            <button class="text-yellow-500 dark:text-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-700 rounded-lg p-1 ml-2 focus:outline-none">
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>
    </div>
</div>


<div class="group h-full w-full flex items-center gap-5 overflow-hidden text-gray-900 dark:text-gray-100 max-w-screen-sm bg-white dark:bg-gray-800 shadow-sm rounded-lg p-4 border border-gray-200 dark:border-gray-700 hover:shadow-md dark:hover:shadow-lg dark:hover:shadow-gray-800/50 transition-all duration-200">
    <div>
        <div class="font-semibold">Task Completed</div>
        <div class="text-sm text-gray-500 dark:text-gray-400">You successfully finished the task.</div>
    </div>
    <button class="bg-gray-800 h-fit text-white rounded-md px-3 py-1.5 text-sm hover:bg-gray-700 dark:text-gray-800 dark:bg-gray-200 dark:hover:bg-gray-100">
        Undo
    </button>
</div>


openui

Build Stunning Interfaces Faster