CCHub Logo CCHub Tailwind Collection
コンポーネント フィードバックコンポーネント フィードバックコンポーネント

フィードバックコンポーネント

ソーシャルネットワーキングインターフェイス用に設計されたレスポンシブフィードバックコンポーネントで、ダークモードをサポートするグレースケールカラースキームに3Dデザイン要素を組み込んでおり、中程度の複雑さとインタラクティブ性に合わせて調整されています。

プレビュー

HTMLコード 

<div class="max-w-md mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform hover:shadow-2xl transition-shadow duration-300">
    <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Name</h2>
            <p class="text-gray-600 dark:text-gray-300">April 10, 2023</p>
        </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300 mb-4">
        This is an example feedback message where users can share their thoughts about the platform and engage with the community.
    </p>
    <div class="flex justify-between items-center">
        <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Like</button>
        <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Reply</button>
    </div>
</div>
<div class="max-w-md mx-auto mt-4 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform hover:shadow-2xl transition-shadow duration-300">
    <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another User</h2>
            <p class="text-gray-600 dark:text-gray-300">April 11, 2023</p>
        </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300 mb-4">
        Feedback is important to shape the experience in a positive direction and enhance user engagement within the social platform.
    </p>
    <div class="flex justify-between items-center">
        <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Like</button>
        <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Reply</button>
    </div>
</div>

関連コンポーネント

フィードバックコンポーネントコンポーネント

ミニマリスト/フラットデザイン ダッシュボードのフィードバックコンポーネントで、補色の配色と適度な複雑さ、レスポンシブ、ダークテーマのサポートを備えています。HTMLとTailwind CSSを使用します。JavaScript はありません。インタラクティブな要素を備えています。画像はpicsum.photosから、アバターは randomuser.me から。

開ける

フィードバックコンポーネントコンポーネント

ソーシャルメディア用のシンプルなGlassmorphismフィードバックコンポーネントで、トライアドカラースキーム、レスポンシブデザイン、ダークテーマのサポートが特徴です。JavaScript は必要ありません。

開ける

フィードバックコンポーネント

魅力的なアニメーションにマイクロインタラクションを組み込んだレスポンシブフィードバックコンポーネント。ダークモードをサポートするように設計されており、プレースホルダー画像とアバターを使用してユーザーフィードバック用の要素を備えています。

開ける