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: 유틸리티 클래스를 사용하여 다크 모드 지원으로 완벽하게 반응합니다. 독특한 시각적 접근 방식을 추구하는 비즈니스/기업 웹 사이트에 적합합니다.

열다

파일 뷰어 구성 요소

생생한 색상을 가진 간단한 스큐어모픽 파일 뷰어 구성 요소로, 대시보드용으로 설계되었으며 밝은 모드와 어두운 모드를 지원합니다.

열다

파일 뷰어 구성 요소

비즈니스/기업 웹 사이트에 적합한 종이/인쇄물에서 영감을 받은 디자인의 간단하고 반응이 빠른 파일 뷰어 구성 요소입니다. 유사한 색상, 시맨틱 HTML 및 다크 모드 지원이 특징입니다.

열다