CCHub Logo CCHub Tailwind Collection
コンポーネント タイムライン タイムラインコンポーネント

タイムラインコンポーネント

グレースケールの配色でスキューモーフィックなスタイルでデザインされたシンプルなレスポンシブタイムラインコンポーネントで、ビジネス/企業のWebサイトに適しています。ダークテーマのサポートを特徴とし、スタイリングにTailwind CSSを使用します。

プレビュー

HTMLコード 

<div class="max-w-4xl mx-auto p-6">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Our Journey</h2>
    <div class="border-l-2 border-gray-300 dark:border-gray-600">
        <div class="flex flex-start mb-4">
            <div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full" />
            </div>
            <div class="ml-4 flex flex-col justify-center">
                <div class="text-xs text-gray-500 dark:text-gray-400">2023-01-01</div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Launched our first product</h3>
                <p class="text-gray-600 dark:text-gray-400">We successfully launched our first product to the market, marking a significant milestone for our company.</p>
            </div>
        </div>
        <div class="flex flex-start mb-4">
            <div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full" />
            </div>
            <div class="ml-4 flex flex-col justify-center">
                <div class="text-xs text-gray-500 dark:text-gray-400">2023-06-15</div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Expanded our services</h3>
                <p class="text-gray-600 dark:text-gray-400">We expanded our service offerings to better meet the needs of our clients and enhance our market presence.</p>
            </div>
        </div>
        <div class="flex flex-start mb-4">
            <div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full" />
            </div>
            <div class="ml-4 flex flex-col justify-center">
                <div class="text-xs text-gray-500 dark:text-gray-400">2023-12-01</div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Achieved 1000 clients</h3>
                <p class="text-gray-600 dark:text-gray-400">We reached a significant achievement of acquiring our 1000th client, showcasing our growth and success.</p>
            </div>
        </div>
    </div>
</div>

関連コンポーネント

タイムラインコンポーネント

ポートフォリオ内の作品や製品を紹介するためのミニマリスト/フラット デザインのタイムライン コンポーネントで、Tailwind CSS を使用して応答性とダーク モードのサポートで設計されています。

開ける

Neumorphism Timeline コンポーネント

Tailwind CSS を使用した Neumorphism でスタイル付けされたレスポンシブ Timeline コンポーネントで、ダーク モードがサポートされています。

開ける

タイムラインコンポーネント

ダッシュボード用のレスポンシブ タイムライン コンポーネントで、マイクロインタラクションとパステル調の配色、ダーク テーマのサポートを備えています。スタイリングに Tailwind CSS を使用し、picsum.photos のプレースホルダー画像と randomuser.me のアバターが含まれています。

開ける