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

파일 뷰어 구성 요소 1

Tailwind CSS를 사용하여 설계된 미니멀리스트 파일 뷰어 구성 요소로, 반응형 효과와 어두운 테마 지원을 제공합니다. 이미지 및 사용자 아바타에 대한 자리 표시자를 포함하여 깔끔한 레이아웃으로 파일을 표시합니다.

미리 보기

HTML 코드 

<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="p-6">
        <div class="flex items-center mb-4">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Last Updated: 2023-10-01</p>
            </div>
        </div>
        <div class="flex justify-center">
            <img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/seed/picsum/400/250" alt="Placeholder Image">
        </div>
        <div class="mt-4">
            <p class="text-gray-700 dark:text-gray-300">File Name: <span class="font-semibold">example-file.pdf</span></p>
            <p class="text-gray-700 dark:text-gray-300">File Size: <span class="font-semibold">1.2 MB</span></p>
            <p class="text-gray-700 dark:text-gray-300">Uploaded On: <span class="font-semibold">2023-09-25</span></p>
        </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-700 p-4 text-center">
        <button class="bg-blue-500 text-white rounded-md py-2 px-4 transition duration-200 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Download</button>
    </div>
</div>

관련 구성 요소

파일 뷰어 구성 요소

포트폴리오를 위해 설계된 복잡한 파일 뷰어 구성 요소로, 보색의 어두운 모드를 특징으로 하며 파일 트리, 콘텐츠 미리보기 및 자세한 정보를 표시합니다. 완벽하게 반응합니다.

열다

파일 뷰어 구성 요소

다크 모드 UI와 어스 톤을 갖춘 복잡하고 반응이 빠른 파일 뷰어 구성 요소로, 스포츠/피트니스 애플리케이션용으로 설계되었습니다. 파일 목록, 미리보기 및 세부 정보 섹션을 제공합니다.

열다

Skeuomorphic_Monochromatic_File_Viewer

시장을 위한 복잡한 스큐어모픽 파일 뷰어 구성 요소로, 단색 색 구성표로 설계되었습니다. 여기에는 파일 목록, 미리보기 창, 작업 버튼 및 자세한 정보 섹션이 포함되어 있으며 모두 완벽하게 반응하고 다크 모드를 지원합니다.

열다