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

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

電子商取引のためのミニマリスト/フラットデザインアクティビティフィード、単色、シンプル、レスポンシブ、ダークテーマ

プレビュー

HTMLコード

<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
  <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Activity Feed</h3>
  <ul class="divide-y divide-gray-200 dark:divide-gray-700">
    <li class="py-3 flex items-center justify-between">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-300">
          <span class="font-medium text-gray-900 dark:text-white">John Doe</span> placed an order.
        </p>
      </div>
      <span class="text-xs text-gray-400 dark:text-gray-500">2 hours ago</span>
    </li>
    <li class="py-3 flex items-center justify-between">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-300">
          <span class="font-medium text-gray-900 dark:text-white">Jane Smith</span> reviewed a product.
        </p>
      </div>
      <span class="text-xs text-gray-400 dark:text-gray-500">5 hours ago</span>
    </li>
    <li class="py-3 flex items-center justify-between">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-300">
          <span class="font-medium text-gray-900 dark:text-white">Robert Brown</span> added item to cart.
        </p>
      </div>
      <span class="text-xs text-gray-400 dark:text-gray-500">10 hours ago</span>
    </li>
  </ul>
</div>

関連コンポーネント

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

作品や製品を展示するためのレトロ/ビンテージスタイルのアクティビティフィードコンポーネント。このデザインは、ダークテーマをサポートする類似の配色を特徴としています。このコンポーネントはインタラクティブで応答性が高く、ポートフォリオでの使用に適しています。

開ける

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

複数の対話型要素を持つブログ コンテンツを表示するように設計された複雑なアクティビティ フィード コンポーネント。3Dデザインスタイルと補色スキームを組み込んでいます。レスポンシブデザインとダークテーマをサポートします。

開ける

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

シンプルな3Dデザイン、パステルカラースキーム、ダークテーマのサポート、Tailwind CSSを備えたブログ/コンテンツ用のレスポンシブアクティビティフィードコンポーネント。

開ける