エラーメッセージコンポーネント
スキューモーフィックなデザインのエラーメッセージコンポーネントで、リアルなアラートアイコンと影付きの境界線が特徴です。レスポンシブレイアウトをサポートし、ダークモード用の明確なスタイルが含まれているため、さまざまなテーマで読みやすさと視覚的に適切な外観が保証されます。
HTMLコード
<div class="rounded-lg shadow-lg bg-gradient-to-br from-red-500 to-red-700 p-6 max-w-sm mx-auto mt-10 relative overflow-hidden dark:from-gray-700 dark:to-gray-900">
<div class="absolute top-0 left-0 w-full h-full pointer-events-none" style="background: radial-gradient(circle at top left, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);"></div>
<div class="flex items-center space-x-4">
<div class="flex-shrink-0">
<!-- Skeuomorphic Error Icon -->
<svg class="h-8 w-8 text-white filter drop-shadow-md dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.306 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<div>
<h3 class="text-lg leading-6 font-medium text-white drop-shadow dark:text-red-50">
Error Occurred
</h3>
<p class="mt-2 text-sm text-red-100 dark:text-red-200">
An unexpected error has occurred. Please try again later.
</p>
</div>
</div>
</div>関連コンポーネント
エラーメッセージコンポーネント
このコンポーネントは、ユーザーのアクションに応答する魅力的なアニメーションでエラーメッセージを表示します。ダークモードのサポートが含まれており、Tailwind CSSを使用したレスポンシブエフェクトを備えています。
エラーメッセージコンポーネント
パステルカラーの配色、複雑なレイアウト、レスポンシブデザイン、Tailwind CSSを使用したダークテーマのサポートを備えたレトロ/ビンテージエラーメッセージコンポーネント。