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>