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を使用したマイクロインタラクションを備えたレスポンシブタイムラインコンポーネント。JavaScript は必要ありません。

開ける

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

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

開ける

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

Glassmorphismデザイン、補色スキーム、ダークテーマのサポートを備えたレスポンシブタイムラインコンポーネントで、ビジネスWebサイトに適しています。ぼかし効果のあるすりガラスのような半透明の要素が特徴です。

開ける