구성 요소 파일 뷰어 파일 뷰어 구성 요소

파일 뷰어 구성 요소

수채화/예술적 스타일과 기업 파란색 색 구성표를 갖춘 반응형 파일 뷰어 구성 요소로, 여행/관광 웹 사이트에 적합합니다. 다크 모드 지원이 포함됩니다.

미리 보기

HTML 코드

<div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 md:p-8 rounded-lg shadow-xl overflow-hidden relative">

  <!-- Background texture / Artistic elements -->
  <div class="absolute inset-0 bg-cover bg-center opacity-30 dark:opacity-10" style="background-image: url('https://www.transparenttextures.com/patterns/water-color.png');"></div>

  <div class="relative z-10 max-w-6xl mx-auto">
    <div class="mb-6 text-center">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-200 mb-2 drop-shadow-md">Your Travel Documents</h2>
      <p class="text-blue-700 dark:text-blue-300 text-lg sm:text-xl font-medium">Explore your flight details, bookings, and itinerary.</p>
    </div>

    <!-- File Viewer Layout -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

      <!-- Left Panel: File List/Navigation -->
      <div class="md:col-span-1 bg-white dark:bg-gray-850 bg-opacity-80 dark:bg-opacity-80 rounded-lg shadow-lg backdrop-blur-sm p-4 border border-blue-200 dark:border-blue-900">
        <h3 class="text-xl font-bold text-blue-800 dark:text-blue-300 mb-4 pb-2 border-b border-blue-300 dark:border-blue-700">My Documents</h3>
        <ul class="space-y-3">
          <li class="flex items-center p-3 rounded-lg cursor-pointer transition duration-300 ease-in-out bg-blue-100 dark:bg-blue-900 border border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-100 shadow-md transform hover:scale-[1.02] hover:shadow-xl">
            <svg class="w-6 h-6 mr-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L14.414 5A2 2 0 0115 6.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>
            <span class="font-semibold">Flight Booking Confirmation.pdf</span>
          </li>
          <li class="flex items-center p-3 rounded-lg cursor-pointer transition duration-300 ease-in-out hover:bg-blue-50 dark:hover:bg-gray-700 border border-blue-100 dark:border-gray-700 text-gray-700 dark:text-gray-300">
            <svg class="w-6 h-6 mr-3 text-blue-500 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 2a2 2 0 00-2 2v8a2 2 0 002 2h6a2 2 0 002-2V6.414A2 2 0 0016.414 5L14 2.586A2 2 0 0012.586 2H9zM13 10V7h-2v3h2z"/></svg>
            <span>Hotel Reservation.pdf</span>
          </li>
          <li class="flex items-center p-3 rounded-lg cursor-pointer transition duration-300 ease-in-out hover:bg-blue-50 dark:hover:bg-gray-700 border border-blue-100 dark:border-gray-700 text-gray-700 dark:text-gray-300">
            <svg class="w-6 h-6 mr-3 text-blue-500 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v5a1 1 0 102 0V8z" clip-rule="evenodd"></path></svg>
            <span>Travel Itinerary.docx</span>
          </li>
          <li class="flex items-center p-3 rounded-lg cursor-pointer transition duration-300 ease-in-out hover:bg-blue-50 dark:hover:bg-gray-700 border border-blue-100 dark:border-gray-700 text-gray-700 dark:text-gray-300">
            <svg class="w-6 h-6 mr-3 text-blue-500 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6h4a1 1 0 011 1v5a1 1 0 01-1 1H2a1 1 0 01-1-1V7a1 1 0 011-1zM14 6h4a1 1 0 011 1v5a1 1 0 01-1 1h-4a1 1 0 01-1-1V7a1 1 0 011-1zM6 16v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H7a1 1 0 01-1-1zm8 0v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1z"/></svg>
            <span>Boarding Pass.pdf</span>
          </li>
        </ul>

        <div class="mt-6 pt-4 border-t border-blue-300 dark:border-blue-700 flex justify-center">
          <button class="px-5 py-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-full shadow-lg hover:from-blue-700 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 transition duration-300 transform hover:-translate-y-0.5">
            <svg class="w-5 h-5 inline-block mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            Download All
          </button>
        </div>
      </div>

      <!-- Right Panel: File Preview -->
      <div class="md:col-span-2 bg-white dark:bg-gray-850 rounded-lg shadow-lg backdrop-blur-sm p-4 border border-blue-200 dark:border-blue-900 flex flex-col">
        <div class="flex justify-between items-center mb-4 pb-3 border-b border-blue-300 dark:border-blue-700">
          <h3 class="text-xl font-bold text-blue-800 dark:text-blue-300">Preview: Flight Booking Confirmation.pdf</h3>
          <div class="flex space-x-3">
            <button class="p-2 rounded-full bg-blue-100 dark:bg-blue-900 border border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-800 transition transform hover:scale-105" title="Previous Page">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
            </button>
            <button class="p-2 rounded-full bg-blue-100 dark:bg-blue-900 border border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-800 transition transform hover:scale-105" title="Next Page">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
            </button>
            <button class="p-2 rounded-full bg-blue-600 text-white shadow-md hover:bg-blue-700 transition transform hover:scale-105" title="Download File">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </button>
          </div>
        </div>
        <div class="flex-grow overflow-hidden rounded-lg border border-blue-300 dark:border-blue-700 bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
          <!-- Placeholder for PDF/Document Viewer -->
          <img src="https://picsum.photos/seed/traveldoc/900/600" alt="Document Preview" class="w-full h-full object-contain rounded-md shadow-inner">
        </div>
        <div class="mt-4 flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
          <span>Page 1 of 3</span>
          <span>Last modified: 2023-10-26</span>
        </div>
      </div>
    </div>

    <!-- Recent Activity / Shared Files (Optional Add-on) -->
    <div class="mt-8 pt-6 border-t border-blue-200 dark:border-blue-800">
      <h3 class="text-xl font-bold text-blue-800 dark:text-blue-300 mb-4">Recent Activity</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-850 rounded-lg shadow-md p-4 flex items-center space-x-4 border border-blue-100 dark:border-gray-700">
          <img class="w-12 h-12 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div>
            <p class="font-medium text-gray-800 dark:text-gray-200">John Doe viewed "Flight Booking"</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">5 minutes ago</p>
          </div>
        </div>
        <div class="bg-white dark:bg-gray-850 rounded-lg shadow-md p-4 flex items-center space-x-4 border border-blue-100 dark:border-gray-700">
          <img class="w-12 h-12 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div>
            <p class="font-medium text-gray-800 dark:text-gray-200">Jane Smith shared "Itinerary"</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">1 hour ago</p>
          </div>
        </div>
        <div class="bg-white dark:bg-gray-850 rounded-lg shadow-md p-4 flex items-center space-x-4 border border-blue-100 dark:border-gray-700">
          <img class="w-12 h-12 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/88.jpg" alt="User Avatar">
          <div>
            <p class="font-medium text-gray-800 dark:text-gray-200">Admin updated "Boarding Pass"</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Yesterday</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

관련 구성 요소

파일 뷰어 구성 요소

Tailwind CSS를 사용하여 Material Design 스타일 및 다크 모드를 지원하는 반응형 파일 뷰어 구성 요소입니다. 구성 요소에는 아이콘, 이름, 크기 및 수정 날짜가 있는 파일 목록이 표시됩니다.

열다

파일 뷰어 구성 요소

이미지와 파일 세부 정보를 표시하는 전자 상거래를 위한 뉴모픽 스타일의 파일 뷰어입니다. 어두운 테마를 지원하는 부드러운 UI 환경을 제공합니다.

열다

파일 뷰어 구성 요소

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

열다