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>

관련 구성 요소

Neumorphism File Viewer 구성 요소

뉴모피즘(Neumorphism) 스타일의 파일 뷰어 컴포넌트(File Viewer Component)는 보색과 보색이 적당히 복잡한 소셜 미디어를 제공합니다. 반응형이며 Tailwind CSS를 사용하여 어두운 테마를 지원합니다.

열다

파일 뷰어 구성 요소

Bauhaus에서 영감을 받은 디자인을 사용한 복잡한 반응형 파일 뷰어 구성 요소로, 유사한 색상을 사용하여 구인 게시판 및 경력 개발 플랫폼에 적합합니다. 다크 모드 지원이 포함됩니다.

열다

Retro File Viewer 구성 요소

레트로/빈티지 80년대/90년대 미학, 따뜻한 중성 색상 구성표를 갖춘 복잡하고 반응이 빠른 파일 뷰어 구성 요소로, 금융/뱅킹 인터페이스용으로 설계되었습니다. 다크 모드 지원 및 대화형 요소가 포함됩니다.

열다