アラート メッセージ コンポーネント
複雑で活気に満ちた、ガラスモルフィズムスタイルの電子商取引用のアラートメッセージコンポーネントで、ダークモードをサポートしています。
HTMLコード
<div class="container mx-auto p-8">
<!-- Light Mode - Vibrant Glassmorphism Alerts -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Success Alert -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-green-600">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-green-800 font-semibold">Success!</p>
<p class="text-green-700 text-sm mt-1">Your order has been placed successfully.</p>
</div>
</div>
</div>
<!-- Info Alert -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-blue-600">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-blue-800 font-semibold">Info!</p>
<p class="text-blue-700 text-sm mt-1">Your items are being processed.</p>
</div>
</div>
</div>
<!-- Warning Alert -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-yellow-600">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h-.01m-6.938 4H2.81a1.97 1.97 0 01-1.834-2.283l1.642-7.34A1.97 1.97 0 014.655 4h14.69a1.97 1.97 0 011.833 2.375l-1.642 7.34A1.97 1.97 0 0119.19 20h-4.253"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-yellow-800 font-semibold">Warning!</p>
<p class="text-yellow-700 text-sm mt-1">Payment verification is pending.</p>
</div>
</div>
</div>
<!-- Danger Alert -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-red-600">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-red-800 font-semibold">Danger!</p>
<p class="text-red-700 text-sm mt-1">There was an issue processing your payment.</p>
</div>
</div>
</div>
</div>
<!-- Dark Mode - Vibrant Glassmorphism Alerts -->
<div class="dark mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Success Alert -->
<div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-green-400">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-green-300 font-semibold">Success!</p>
<p class="text-green-400 text-sm mt-1">Your order has been placed successfully.</p>
</div>
</div>
</div>
<!-- Info Alert -->
<div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-blue-400">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-blue-300 font-semibold">Info!</p>
<p class="text-blue-400 text-sm mt-1">Your items are being processed.</p>
</div>
</div>
</div>
<!-- Warning Alert -->
<div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-yellow-400">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h-.01m-6.938 4H2.81a1.97 1.97 0 01-1.834-2.283l1.642-7.34A1.97 1.97 0 014.655 4h14.69a1.97 1.97 0 011.833 2.375l-1.642 7.34A1.97 1.97 0 0119.19 20h-4.253"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-yellow-300 font-semibold">Warning!</p>
<p class="text-yellow-400 text-sm mt-1">Payment verification is pending.</p>
</div>
</div>
</div>
<!-- Danger Alert -->
<div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-red-400">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-red-300 font-semibold">Danger!</p>
<p class="text-red-400 text-sm mt-1">There was an issue processing your payment.</p>
</div>
</div>
</div>
</div>
</div>関連コンポーネント
アラート メッセージ コンポーネント
電子商取引の目的でglassmorphism効果を使用して設計された応答性の高いアラートメッセージコンポーネント。単色の配色とTailwind CSSを使用したダークモードのサポートを備えたシンプルなレイアウトが特徴です。
アラート メッセージ コンポーネント
ポートフォリオ用のマテリアルデザインスタイル、パステルカラースキーム、および複雑な複雑さのレベルを備えたアラートメッセージコンポーネント。ダークテーマをサポートするレスポンシブデザイン。JavaScriptコードは必要なく、Tailwindクラスを含むHTMLのみが必要です。ダークモードでは、スタイリングにTailwindのdark:プレフィックスを使用します。画像にはpicsum.photosを使用し、アバターには randomuser.me を使用します。
アラート メッセージ コンポーネント
3Dデザイン、レスポンシブ機能、およびTailwind CSSを使用したダークテーマのサポートを備えたアラートメッセージコンポーネント。このコンポーネントには、さまざまなアラートタイプ(成功、エラー、警告、情報)とアイコンとメッセージが含まれています。