成功メッセージコンポーネント

アーストーンとダークテーマをサポートするマテリアルデザインに触発されたレスポンシブな成功メッセージコンポーネントで、コンテンツ消費向けに設計されています。

プレビュー

HTMLコード

<div class="max-w-xl mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/50" alt="Success Icon" class="w-10 h-10 rounded-full mr-2">
        <div class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</div>
    </div>
    <p class="text-gray-600 dark:text-gray-400">
        Your changes have been saved successfully. You can now continue to explore the content.
    </p>
    <div class="mt-4">
        <button class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-600">Continue</button>
    </div>
</div>

<div class="max-w-xl mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg mt-4">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
        <div class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</div>
    </div>
    <p class="text-gray-600 dark:text-gray-400">
        Thanks for your submission! Stay tuned for updates regarding your content.
    </p>
    <div class="mt-4">
        <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">Learn More</button>
    </div>
</div>

成功メッセージコンポーネント

プレビュー

HTMLコード

関連コンポーネント

成功メッセージコンポーネント

産業活気政府成功メッセージ

アールデコサクセスメッセージ