CCHub Logo CCHub Tailwind Collection
구성 요소 파일 뷰어 파일 뷰어 구성 요소

파일 뷰어 구성 요소

미니멀하고 평평한 디자인의 파일 뷰어 구성 요소로, 단색 색 구성표와 어두운 테마를 지원하는 대시보드 설정에서 데이터 시각화에 적합합니다.

미리 보기

HTML 코드 

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-md">
  <h2 class="text-xl text-gray-100 dark:text-gray-200 mb-4">File Viewer</h2>
  <div class="flex flex-col md:flex-row justify-between mb-4">
    <div class="w-full md:w-2/3">
      <img src="https://picsum.photos/600/400" alt="File Preview" class="rounded-lg">
    </div>
    <div class="w-full md:w-1/3 md:ml-4">
      <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow">
        <h3 class="text-lg text-gray-200 dark:text-gray-300 mb-2">File Details</h3>
        <p class="text-gray-300 dark:text-gray-400">Name: Example File.pdf</p>
        <p class="text-gray-300 dark:text-gray-400">Size: 2.5 MB</p>
        <p class="text-gray-300 dark:text-gray-400">Date: 2023-10-05</p>
        <div class="mt-4">
          <button class="bg-blue-600 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg">Download</button>
          <button class="bg-red-600 hover:bg-red-500 text-white font-semibold py-2 px-4 rounded-lg ml-2">Delete</button>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-col"> 
    <h3 class="text-lg text-gray-200 dark:text-gray-300 mb-2">Comments</h3>
    <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow mb-4">
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
        <div>
          <h4 class="text-gray-300 dark:text-gray-400">John Doe</h4>
          <p class="text-gray-400 dark:text-gray-500">Great file!</p>
        </div>
      </div>
    </div>
    <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow mb-4">
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
        <div>
          <h4 class="text-gray-300 dark:text-gray-400">Jane Doe</h4>
          <p class="text-gray-400 dark:text-gray-500">Thanks for sharing!</p>
        </div>
      </div>
    </div>
    <div class="flex mb-2">
      <input type="text" placeholder="Add a comment..." class="flex-grow border border-gray-600 bg-gray-700 dark:bg-gray-800 text-gray-200 dark:text-gray-300 rounded-lg py-2 px-4 mr-2" />
      <button class="bg-green-500 hover:bg-green-400 text-white font-semibold py-2 px-4 rounded-lg">Post</button>
    </div>
  </div>
</div>

관련 구성 요소

파일 뷰어 구성 요소

80/90년대 복고풍 미학에서 영감을 받은 향수를 불러일으키는 파일 뷰어 구성 요소로, Tailwind CSS로 디자인되었으며 반응형 효과와 어두운 테마를 지원합니다.

열다

Brutalist File Viewer 구성 요소

브루탈리즘 디자인 원칙을 가진 원시적이고 대담한 파일 뷰어 구성 요소입니다. 높은 대비, 틀에 얽매이지 않는 레이아웃, 의도적으로 조잡한 요소가 특징입니다. 이 구성 요소에는 파일 미리 보기, 메타데이터 표시 및 작업 버튼이 뚜렷한 회색 음영 색 구성표로 포함되어 있습니다. Tailwind CSS dark: 유틸리티 클래스를 사용하여 다크 모드 지원으로 완벽하게 반응합니다. 독특한 시각적 접근 방식을 추구하는 비즈니스/기업 웹 사이트에 적합합니다.

열다

파일 뷰어 구성 요소 - 음악/오디오

음악 및 오디오 플랫폼용으로 설계된 복잡하고 반응이 빠른 파일 뷰어 구성 요소로, 생생한 색상과 다크 모드를 지원하는 머티리얼 디자인 미학을 특징으로 합니다.

열다