CCHub Logo CCHub Tailwind Collection
コンポーネント ファイルビューア Retro File Viewer コンポーネント

Retro File Viewer コンポーネント

レスポンシブレイアウトとダークテーマをサポートするレトロ/ビンテージファイルビューアコンポーネント。アイコンと名前を含むファイルリストとプレビュー領域が含まれています。レトロなスタイルのフォントと色を使用します。

プレビュー

HTMLコード 

<div class="font-mono bg-gray-200 dark:bg-gray-800 min-h-screen">
  <div class="container mx-auto p-4">
    <div class="flex flex-col md:flex-row bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">

      <!-- File List -->
      <div class="w-full md:w-1/3 pr-4">
        <h2 class="text-lg font-bold mb-4 text-gray-800 dark:text-gray-200">Files</h2>
        <ul>
          <li class="flex items-center py-2 border-b border-gray-300 dark:border-gray-600">
            <svg class="w-5 h-5 mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path></svg>
            <span class="text-gray-700 dark:text-gray-300">document.txt</span>
          </li>
          <li class="flex items-center py-2 border-b border-gray-300 dark:border-gray-600">
            <svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"></path></svg>
            <span class="text-gray-700 dark:text-gray-300">image.jpg</span>
          </li>
          <li class="flex items-center py-2 border-b border-gray-300 dark:border-gray-600">
            <svg class="w-5 h-5 mr-2 text-red-500 dark:text-red-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8.668V14a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            <span class="text-gray-700 dark:text-gray-300">video.mp4</span>
          </li>
        </ul>
      </div>

      <!-- File Preview -->
      <div class="w-full md:w-2/3 mt-4 md:mt-0">
        <h2 class="text-lg font-bold mb-4 text-gray-800 dark:text-gray-200">Preview</h2>
        <div class="bg-gray-100 dark:bg-gray-600 p-4 rounded-lg h-64 flex items-center justify-center text-gray-500 dark:text-gray-400">
          Select a file to preview
        </div>
      </div>

    </div>
  </div>
</div>

関連コンポーネント

Brutalist File Viewer コンポーネント

ブルータリズムのデザイン原則を備えた、生の大胆なファイルビューアコンポーネント。ハイコントラスト、型破りなレイアウト、意図的に粗雑な要素が特徴です。このコンポーネントには、ファイルプレビュー、メタデータ表示、およびアクションボタンが、はっきりとしたグレースケールの配色で含まれています。Tailwind CSS dark: ユーティリティ クラスを使用したダーク モードのサポートで完全にレスポンシブです。独特の視覚的アプローチを求めるビジネス/企業のWebサイトに適しています。

開ける

ファイルビューアコンポーネント1

Tailwind CSSを使用して設計されたミニマリストのファイルビューアコンポーネントで、レスポンシブエフェクトとダークテーマのサポートが特徴です。画像やユーザーアバターのプレースホルダーなど、クリーンなレイアウトでファイルを表示します。

開ける

Neumorphism File Viewer コンポーネント

ソーシャルメディア用のニューモーフィズムスタイルのファイルビューアコンポーネントで、補色の配色と適度な複雑さを備えています。レスポンシブで、Tailwind CSSを使用したダークテーマをサポートしています。

開ける