CCHub Logo CCHub Tailwind Collection
コンポーネント インフォグラフィック RetroInfographicsコンポーネント

RetroInfographicsコンポーネント

レトロ/ビンテージデザイン、パステルカラースキーム、ダークモードをサポートするレスポンシブインフォグラフィックコンポーネント。スタイリングにTailwind CSSを使用し、ブログやコンテンツの使用に適した複雑なインターフェイス用の複数のインタラクティブ要素が含まれています。タイムライン、プログレスバー、チャート、コールトゥアクションが含まれており、すべて80年代/90年代の美学とパステルカラーでスタイリングされています。picsum.photosからのランダムな画像を使用し、アバターに randomuser.me します。

プレビュー

HTMLコード 

<div class="bg-gradient-to-b from-pink-200 to-purple-200 dark:from-gray-800 dark:to-gray-900 min-h-screen p-8 font-mono">
  <div class="container mx-auto">
    <h1 class="text-4xl text-center text-gray-800 dark:text-white mb-12 uppercase tracking-wide">Digital Voyage: An Infographic</h1>

    </div>

  </div>
</div>

関連コンポーネント

インフォグラフィックコンポーネント

3Dデザイン要素と、ブログ/コンテンツの使用に適した類似の配色を備えた、シンプルでレスポンシブなインフォグラフィックコンポーネントです。これには、Tailwind CSSを使用したダークテーマのサポートが含まれています。

開ける

インフォグラフィックコンポーネント

ポートフォリオのための複雑でミニマルなインフォグラフィックコンポーネントで、主要な統計や成果をフィーチャーしています。補色配色を使用し、ダークモードをサポートするレスポンシブデザインが含まれています。

開ける

インフォグラフィックコンポーネント

3Dデザイン要素、パステルカラーの配色、ダッシュボードの適度な複雑さ、ダークモードのサポートを備えたレスポンシブインフォグラフィックコンポーネント。JavaScriptは不要で、Tailwind CSSを使用したHTMLのみ。

開ける