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

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

ダークモードのサポートとTailwind CSSを使用したマイクロインタラクションを備えたレスポンシブタイムラインコンポーネント。JavaScript は必要ありません。

プレビュー

HTMLコード 

<div class="container mx-auto px-4 py-8">
  <div class="flex flex-col md:grid grid-cols-12 text-gray-50">
    <div class="flex md:contents">
      <div class="col-start-2 col-end-4 mr-10 md:mx-auto relative">
        <div class="h-full w-6 flex items-center justify-center">
          <div class="h-full w-1 bg-blue-800 pointer-events-none"></div>
        </div>
        <div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-blue-500 shadow text-center">
          <i class="fas fa-check-circle text-white"></i>
        </div>
      </div>
      <div class="col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto shadow-md w-full">
        <h3 class="font-semibold text-lg mb-1">Event Title 1</h3>
        <p class="leading-tight text-justify">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et nunc id erat facilisis ultricies sed ac erat.
        </p>
      </div>
    </div>

    <div class="flex md:contents">
      <div class="col-start-2 col-end-4 mr-10 md:mx-auto relative">
        <div class="h-full w-6 flex items-center justify-center">
          <div class="h-full w-1 bg-blue-800 pointer-events-none"></div>
        </div>
        <div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-blue-500 shadow text-center">
          <i class="fas fa-check-circle text-white"></i>
        </div>
      </div>
      <div class="col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto shadow-md w-full">
        <h3 class="font-semibold text-lg mb-1">Event Title 2</h3>
        <p class="leading-tight text-justify">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et nunc id erat facilisis ultricies sed ac erat.
        </p>
      </div>
    </div>

    <div class="flex md:contents">
      <div class="col-start-2 col-end-4 mr-10 md:mx-auto relative">
        <div class="h-full w-6 flex items-center justify-center">
          <div class="h-full w-1 bg-blue-800 pointer-events-none"></div>
        </div>
        <div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-blue-500 shadow text-center">
          <i class="fas fa-check-circle text-white"></i>
        </div>
      </div>
      <div class="col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto shadow-md w-full">
        <h3 class="font-semibold text-lg mb-1">Event Title 3</h3>
        <p class="leading-tight text-justify">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et nunc id erat facilisis ultricies sed ac erat.
        </p>
      </div>
    </div>

  </div>
</div>

関連コンポーネント

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

単色の配色と微妙な3D効果を備えたシンプルでレスポンシブなタイムラインコンポーネントで、旅行/観光Webサイトに適しています。ダークモードのサポートが含まれています。

開ける

グレースケールソーシャルメディアタイムライン

Tailwind CSSで構築された、応答性の高いダークモード対応のソーシャルメディアタイムラインコンポーネント。厳密なグレースケールの配色と、ユーザーアバター、投稿コンテンツ(テキストと画像)、エンゲージメント統計、アクションボタンを備えた複雑なポストカードが特徴です。ソーシャルネットワーキングインターフェース用に設計されており、各投稿に複数のインタラクティブ要素があります。このデザインは、目の疲れを軽減するために暗い背景をサポートしています。JavaScriptは使用しておりません。

開ける

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

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

開ける