Components Alert Messages Alert Messages Component

Alert Messages Component

A responsive skeuomorphic alert messages component designed for blogs/content consumption, featuring a complementary color scheme and dark theme support.

Preview

HTML Code

<div class="max-w-md mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Alert Title</h2>
    </div>
    <p class="text-gray-700 dark:text-gray-300">
        This is a simple alert message that mimics real-world alert styles, using complementary colors for the design.
    </p>
    <div class="mt-4 flex justify-end">
        <img src="https://picsum.photos/150/50?random" alt="Illustration" class="rounded-md shadow-md">
    </div>
</div>

Related Components

Alert Messages Component

An alert messages component designed with a dark UI, autumn color scheme, suitable for professional consulting services. It is responsive and supports dark mode.

Open

Alert Messages Component

An Alert Messages Component with a 3D design, responsive features, and dark theme support using Tailwind CSS. The component includes different alert types (success, error, warning, info) with icons and messages.

Open

Corporate_Professional_Alert_Messages

A collection of clean, trustworthiness-inspired alert messages suitable for business or portfolio environments, featuring jewel-tone colors and responsive design with dark mode support. Includes informational, success, warning, and error alerts.

Open