아르 데코 퍼플 문서 구성 요소
아르데코 디자인 테마가 있는 중간 정도의 복잡성 문서/위키 구성 요소로, 보라색/보라색 색상 스펙트럼을 사용하여 기하학적 패턴과 고급스러운 스타일을 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.
HTML 코드
<div class="font-sans bg-gradient-to-br from-purple-100 to-indigo-100 min-h-screen p-4 dark:from-gray-900 dark:to-black md:p-8">
<!-- Component Wrapper -->
<div class="max-w-6xl mx-auto bg-white rounded-xl shadow-2xl overflow-hidden dark:bg-zinc-800 transform transition-all duration-500 hover:scale-[1.005] hover:shadow-3xl border-t-4 border-l-4 border-purple-600 dark:border-purple-800">
<!-- Header Section -->
<div class="relative p-6 md:p-10 bg-purple-800 text-white dark:bg-purple-950 overflow-hidden before:absolute before:inset-0 before:bg-gradient-to-br before:from-purple-700 before:to-fuchsia-600 before:opacity-30 dark:before:from-purple-900 dark:before:to-fuchsia-900 before:blur-sm">
<div class="relative z-10 flex flex-col md:flex-row justify-between items-center">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight text-white drop-shadow-lg font-serif mb-4 md:mb-0">
<span class="block">Documentation</span>
<span class="block text-purple-200 text-2xl md:text-3xl lg:text-4xl mt-2 font-light">Art Deco Archives</span>
</h1>
<div class="flex space-x-4">
<button class="px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-full text-lg font-semibold transition duration-300 transform hover:scale-105 shadow-md flex items-center">
<svg class="w-5 h-5 mr-2" 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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
New Page
</button>
<button class="px-6 py-3 bg-fuchsia-500 hover:bg-fuchsia-600 text-white rounded-full text-lg font-semibold transition duration-300 transform hover:scale-105 shadow-md flex items-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2400/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
Search
</button>
</div>
</div>
<!-- Art Deco Pattern Overlay -->
<div class="absolute inset-0 bg-repeat bg-center opacity-10" style="background-image: url('data:image/svg+xml