アクティビティフィードコンポーネント

Tailwind CSS を使用してスタイル設定された、マイクロインタラクションとダークテーマを備えた e コマース向けの複雑なアクティビティフィードコンポーネント。

プレビュー

HTMLコード

<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Activity Feed</h2>
    <div class="space-y-4">
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-start space-x-4">
                <img src="https://i.pravatar.cc/150?img=3" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="flex-1">
                    <p class="text-gray-700 dark:text-gray-300 font-semibold">John Doe</p>
                    <p class="text-gray-600 dark:text-gray-400">Just purchased a new phone!</p>
                    <p class="text-sm text-gray-500 dark:text-gray-500">5 minutes ago</p>
                </div>
            </div>
            <img src="https://picsum.photos/200/100" alt="Product Image" class="mt-2 rounded-md transition-transform transform hover:scale-105 duration-300">
        </div>
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-start space-x-4">
                <img src="https://i.pravatar.cc/150?img=5" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="flex-1">
                    <p class="text-gray-700 dark:text-gray-300 font-semibold">Jane Smith</p>
                    <p class="text-gray-600 dark:text-gray-400">Left a review for "Wireless Headphones"!</p>
                    <p class="text-sm text-gray-500 dark:text-gray-500">10 minutes ago</p>
                </div>
            </div>
            <img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="mt-2 rounded-md transition-transform transform hover:scale-105 duration-300">
        </div>
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-start space-x-4">
                <img src="https://i.pravatar.cc/150?img=7" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="flex-1">
                    <p class="text-gray-700 dark:text-gray-300 font-semibold">Alice Johnson</p>
                    <p class="text-gray-600 dark:text-gray-400">Started following you!</p>
                    <p class="text-sm text-gray-500 dark:text-gray-500">15 minutes ago</p>
                </div>
            </div>
        </div>
    </div>
</div>

アクティビティフィードコンポーネント

プレビュー

HTMLコード

関連コンポーネント

アクティビティフィードコンポーネント

アクティビティフィードコンポーネント 41

アクティビティフィードコンポーネント