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

Neumorphism File Viewer 구성 요소

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

미리 보기

HTML 코드 

<div class="p-6 max-w-sm mx-auto bg-gray-100 dark:bg-gray-800 rounded-xl shadow-lg space-y-4">
  <div class="flex items-center space-x-4">
    <div class="flex-shrink-0">
      <svg class="h-12 w-12 text-teal-500 dark:text-teal-300" 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 17v-5m0 0V5c0-1.1.9-2 2-2h2a2 2 0 012 2v5m0 0v5a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
    </div>
    <div class="flex-grow">
      <div class="text-xl font-medium text-black dark:text-white">Document.pdf</div>
      <p class="text-gray-500 dark:text-gray-400">1.5 MB</p>
    </div>
  </div>
  <div class="flex justify-between items-center">
    <button class="px-4 py-2 text-sm text-blue-600 dark:text-blue-300 font-semibold rounded-full border border-transparent bg-blue-200 dark:bg-blue-700 hover:bg-blue-300 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Download</button>
    <button class="px-4 py-2 text-sm text-red-600 dark:text-red-300 font-semibold rounded-full border border-transparent bg-red-200 dark:bg-red-700 hover:bg-red-300 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">Delete</button>
  </div>
  <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5">
    <div class="bg-teal-500 dark:bg-teal-300 h-2.5 rounded-full" style="width: 50%"></div>
  </div>
</div>

<style>
  .shadow-lg {
    box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
  }
  .dark .shadow-lg {
    box-shadow: 7px 7px 15px #6b6b6b, -7px -7px 15px #a1a1a1;
  }
</style>

관련 구성 요소

파일 뷰어 구성 요소 1

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

열다

파일 뷰어 구성 요소

단색 색 구성표의 어두운 모드에서 전자 상거래 웹 사이트를 위해 설계된 반응형 파일 뷰어 구성 요소입니다. 여기에는 파일 업로드 및 미리보기와 같은 대화형 기능이 포함되어 있습니다.

열다

파일 뷰어 구성 요소

3D 디자인, 보색 구성표 및 간단한 레이아웃을 갖춘 전자 상거래를 위한 반응형 파일 뷰어 구성 요소로, Tailwind CSS를 사용하여 다크 모드를 지원합니다. 제품 파일 또는 문서를 표시합니다.

열다