アラート メッセージ コンポーネント
パステルカラーの配色でミニマル/フラットなスタイルでデザインされたレスポンシブアラートメッセージコンポーネントは、ソーシャルメディアインターフェイスに適しており、ダークテーマのサポートを組み込んでいます。
HTMLコード
<div class="max-w-md mx-auto mt-5">
<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden">
<div class="flex items-center p-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h2 class="text-gray-800 dark:text-white text-lg font-medium">John Doe</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm">Just now</p>
</div>
</div>
<div class="p-4">
<p class="text-gray-800 dark:text-gray-300">This is a simple alert message for your social media interface.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden mt-4">
<div class="flex items-center p-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h2 class="text-gray-800 dark:text-white text-lg font-medium">Jane Smith</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm">5 minutes ago</p>
</div>
</div>
<div class="p-4">
<p class="text-gray-800 dark:text-gray-300">Another alert message from the social networking interface!</p>
</div>
</div>
</div>
関連コンポーネント
アラート メッセージ コンポーネント
このコンポーネントは、ミニマリスト/フラットなデザイン、アース カラー スキーム、複雑なレイアウトのアラート メッセージです。ソーシャルメディアインターフェイス用に設計されており、ダークテーマのサポートにより応答性があります。スタイリングにTailwind CSSを使用し、複数のインタラクティブ要素が含まれています。
オーガニックネイチャーインスパイアードアラート
オーガニック/自然にインスパイアされたデザイン、補完的な配色を備えたシンプルで応答性の高いアラートメッセージコンポーネントで、コンサルティング/サービスWebサイトに適しています。ダークモードのサポートが含まれています。