アラート メッセージ コンポーネント
ポートフォリオ内の通知やメッセージを表示するためのダークモードのレスポンシブアラートメッセージコンポーネントで、アースカラーと複数のインタラクティブ要素で設計されています。
HTMLコード
<div class="bg-gray-800 dark:bg-gray-900 p-5 rounded-lg shadow-lg">
<h2 class="text-lg font-bold text-earth-900 dark:text-earth-300">Alert Messages</h2>
<div class="my-4">
<div class="bg-earth-700 dark:bg-earth-600 p-4 rounded-lg flex items-start mb-4">
<img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3" />
<div>
<p class="text-earth-100 dark:text-earth-200">New message from your portfolio submission!</p>
<button class="mt-2 bg-earth-600 hover:bg-earth-500 text-earth-100 font-bold py-2 px-4 rounded">View</button>
</div>
</div>
<div class="bg-earth-700 dark:bg-earth-600 p-4 rounded-lg flex items-start mb-4">
<img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3" />
<div>
<p class="text-earth-100 dark:text-earth-200">Your work has been reviewed!</p>
<button class="mt-2 bg-earth-600 hover:bg-earth-500 text-earth-100 font-bold py-2 px-4 rounded">Reply</button>
</div>
</div>
<div class="bg-earth-700 dark:bg-earth-600 p-4 rounded-lg flex items-start">
<img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3" />
<div>
<p class="text-earth-100 dark:text-earth-200">Don't forget to update your portfolio!</p>
<button class="mt-2 bg-earth-600 hover:bg-earth-500 text-earth-100 font-bold py-2 px-4 rounded">Update</button>
</div>
</div>
</div>
</div>関連コンポーネント
アラート メッセージ コンポーネント
ポートフォリオ用のマテリアルデザインスタイル、パステルカラースキーム、および複雑な複雑さのレベルを備えたアラートメッセージコンポーネント。ダークテーマをサポートするレスポンシブデザイン。JavaScriptコードは必要なく、Tailwindクラスを含むHTMLのみが必要です。ダークモードでは、スタイリングにTailwindのdark:プレフィックスを使用します。画像にはpicsum.photosを使用し、アバターには randomuser.me を使用します。
アラート メッセージ コンポーネント
電子商取引の目的でglassmorphism効果を使用して設計された応答性の高いアラートメッセージコンポーネント。単色の配色とTailwind CSSを使用したダークモードのサポートを備えたシンプルなレイアウトが特徴です。