フィードバックコンポーネント
魅力的なアニメーションにマイクロインタラクションを組み込んだレスポンシブフィードバックコンポーネント。ダークモードをサポートするように設計されており、プレースホルダー画像とアバターを使用してユーザーフィードバック用の要素を備えています。
HTMLコード
<div class="flex flex-col items-center p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-lg font-semibold dark:text-white mb-4">We Value Your Feedback!</h2>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
<textarea class="ml-3 w-full h-24 p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-shadow duration-200 ease-in-out" placeholder="Share your thoughts..."></textarea>
</div>
<div class="flex justify-between w-full">
<button class="bg-blue-600 text-white font-semibold py-2 px-4 rounded-md transition-transform transform hover:scale-105 duration-200 ease-in-out">Submit</button>
<button class="bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded-md hover:bg-gray-400 transition-colors duration-200 ease-in-out dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">Cancel</button>
</div>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-3">Your feedback helps us improve!</p>
</div>
関連コンポーネント
フィードバックコンポーネント
Skeuomorphismにインスパイアされたフィードバックコンポーネントで、ダッシュボードの類似の配色が特徴です。シンプルで応答性が高く、Tailwind CSSを使用したダークモードをサポートするように設計されています。shadcn/ui を使用して、スタイリングとコンポーネントを強化します。