3D_Vibrant_Columns_Component
문서 및 Wiki 사이트에 적합한 복잡하고 생동감 넘치는 반응형 3D 스타일 열 구성 요소로, 다크 모드 지원, 미묘한 애니메이션 및 시맨틱 HTML을 제공합니다.
HTML 코드
<section class="py-16 px-4 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-teal-950 sm:px-6 lg:px-8 overflow-hidden">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600 dark:from-purple-400 dark:to-pink-400 mb-16 relative z-10 animate-fade-in">
Unleash Your Knowledge
<span class="block text-lg mt-2 text-purple-700 dark:text-purple-300 font-medium">Dive Deep into Our Comprehensive Documentation</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Column 1: Getting Started -->
<article class="relative group perspective-1000">
<div class="relative transform-style-preserve-3d transition-transform duration-700 group-hover:rotateY-10 group-hover:scale-105 active:rotateY-20 active:scale-110 shadow-2xl rounded-3xl overflow-hidden bg-white dark:bg-gray-800 p-8 pt-20 border-t-8 border-purple-500 dark:border-purple-600 animate-slide-up">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-700 opacity-20 dark:opacity-30 blur-xl z-0"></div>
<div class="absolute -top-6 left-1/2 -ml-12 w-24 h-24 bg-purple-600 dark:bg-purple-500 rounded-full flex items-center justify-center shadow-lg transform translateZ-40 group-hover:scale-110 transition-transform duration-300">
<svg class="w-12 h-12 text-white" 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.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m1.636 6.364l.707-.707M6 21v-1m-4.636-1.636l.707-.707M12 10.5V19m-7.954-1-1.603-2.264M15.954 18l1.603-2.264M5.462 14.5L7.72 16.634C7.882 16.71 8 16.75 8 17s-.118.29-.28.366L5.462 19.5"></path>
</svg>
</div>
<div class="relative z-10">
<h3 class="text-3xl font-bold text-gray-900 dark:text-white mb-4 transform translateZ-20">Getting Started</h3>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6 transform translateZ-10">Kickstart your journey with our easy-to-follow setup guides and basic concepts. Perfect for beginners!</p>
<ul class="space-y-3 mb-8">
<li><a href="#" class="flex items-center text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 transition duration-200 transform translateZ-5 hover:translate-x-1">
<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="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>
Installation Guide
</a></li>
<li><a href="#" class="flex items-center text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 transition duration-200 transform translateZ-5 hover:translate-x-1">
<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="M8 14v3m4-3v3m4-3v3M3 21h18M3 10V7a2 2 0 012-2h14a2 2 0 012 2v3m-2 10h.01M5 10h.01"></path></svg>
Core Concepts
</a></li>
</ul>
<a href="#" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-semibold rounded-full shadow-lg hover:from-purple-700 hover:to-pink-700 transform translateZ-30 transition-all duration-300 group-hover:scale-105 active:scale-95">
Explore Guides
<svg class="ml-2 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
</a>
</div>
</div>
</article>
<!-- Column 2: Advanced Topics -->
<article class="relative group perspective-1000">
<div class="relative transform-style-preserve-3d transition-transform duration-700 group-hover:rotateY-10 group-hover:scale-105 active:rotateY-20 active:scale-110 shadow-2xl rounded-3xl overflow-hidden bg-white dark:bg-gray-800 p-8 pt-20 border-t-8 border-teal-500 dark:border-teal-600 animate-slide-up animation-delay-200">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-teal-500 to-blue-500 dark:from-teal-700 dark:to-blue-700 opacity-20 dark:opacity-30 blur-xl z-0"></div>
<div class="absolute -top-6 left-1/2 -ml-12 w-24 h-24 bg-teal-600 dark:bg-teal-500 rounded-full flex items-center justify-center shadow-lg transform translateZ-40 group-hover:scale-110 transition-transform duration-300">
<svg class="w-12 h-12 text-white" 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.75 17L9 20l-1 1h8l-1-1-1.25-3M15 10V7a3 3 0 00-3-3m-4 10H8m4 0h4m-4 0c1.333-1 2.5-4 2.5-4S13 9 12 8s-2.5 4-2.5 4S9 9 10 8c1.333-1 2.5-4 2.5-4z"></path>
</svg>
</div>
<div class="relative z-10">
<h3 class="text-3xl font-bold text-gray-900 dark:text-white mb-4 transform translateZ-20">Advanced Topics</h3>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6 transform translateZ-10">Deep dive into complex features, optimization, and specific use cases for experienced users.</p>
<ul class="space-y-3 mb-8">
<li><a href="#" class="flex items-center text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-200 transition duration-200 transform translateZ-5 hover:translate-x-1">
<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="M9 12l2 2 4-4M7.835 4.697A3.42 3.42 0 007 9.111v3.089L8.104 21H15.896L17 12.2V9.111a3.42 3.42 0 00-.835-4.414C14.456 2.012 11.917 1 9.5 1S4.544 2.012 2.835 4.697z"></path></svg>
API Reference
</a></li>
<li><a href="#" class="flex items-center text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-200 transition duration-200 transform translateZ-5 hover:translate-x-1">
<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="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
Performance Optimization
</a></li>
</ul>
<a href="#" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-teal-600 to-blue-600 text-white font-semibold rounded-full shadow-lg hover:from-teal-700 hover:to-blue-700 transform translateZ-30 transition-all duration-300 group-hover:scale-105 active:scale-95">
View Advanced Docs
<svg class="ml-2 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
</a>
</div>
</div>
</article>
<!-- Column 3: Community & Support -->
<article class="relative group perspective-1000">
<div class="relative transform-style-preserve-3d transition-transform duration-700 group-hover:rotateY-10 group-hover:scale-105 active:rotateY-20 active:scale-110 shadow-2xl rounded-3xl overflow-hidden bg-white dark:bg-gray-800 p-8 pt-20 border-t-8 border-orange-500 dark:border-orange-600 animate-slide-up animation-delay-400">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-orange-500 to-red-500 dark:from-orange-700 dark:to-red-700 opacity-20 dark:opacity-30 blur-xl z-0"></div>
<div class="absolute -top-6 left-1/2 -ml-12 w-24 h-24 bg-orange-600 dark:bg-orange-500 rounded-full flex items-center justify-center shadow-lg transform translateZ-40 group-hover:scale-110 transition-transform duration-300">
<svg class="w-12 h-12 text-white" 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="M17 20h2a2 2 0 002-2V9.667a1 1 0 00-.5-.866l-6-3.75a2 2 0 00-2 0l-6 3.75a1 1 0 00-.5.866V18a2 2 0 002 2h2m0 0v-2a3 3 0 013-3h2a3 3 0 013 3v2m-6 0h6m-7 2l-1 1H4a2 2 0 01-2-2v-4a2 2 0 012-2h16c1.105 0 2 .895 2 2v4a2 2 0 01-2 2h-1l-1-1m-10-8h.01M16 12h.01"></path>
</svg>
</div>
<div class="relative z-10">
<h3 class="text-3xl font-bold text-gray-900 dark:text-white mb-4 transform translateZ-20">Community & Support</h3>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6 transform translateZ-10">Connect with fellow users, get help from experts, and contribute to the knowledge base.</p>
<ul class="space-y-3 mb-8">
<li><a href="#" class="flex items-center text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-200 transition duration-200 transform translateZ-5 hover:translate-x-1">
<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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
Forums & Discord
</a></li>
<li><a href="#" class="flex items-center text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-200 transition duration-200 transform translateZ-5 hover:translate-x-1">
<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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
Report an Issue
</a></li>
</ul>
<a href="#" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-orange-600 to-red-600 text-white font-semibold rounded-full shadow-lg hover:from-orange-700 hover:to-red-700 transform translateZ-30 transition-all duration-300 group-hover:scale-105 active:scale-95">
Join the Community
<svg class="ml-2 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
</a>
</div>
</div>
</article>
</div>
</div>
</section>
<style>
/* Define perspective for 3D effect */
.perspective-1000 {
perspective: 1000px;
}
/* Common 3D transforms */
.transform-style-preserve-3d {
transform-style: preserve-3d;
}
.rotateY-10 {
transform: rotateY(10deg);
}
.rotateY-20 {
transform: rotateY(20deg);
}
/* z-axis translations for layering */
.translateZ-40 {
transform: translateZ(40px);
}
.translateZ-30 {
transform: translateZ(30px);
}
.translateZ-20 {
transform: translateZ(20px);
}
.translateZ-10 {
transform: translateZ(10px);
}
.translateZ-5 {
transform: translateZ(5px);
}
/* Keyframes for animations */
@keyframes fade-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slide-up {
from { opacity: 0; transform: translateY(50px) rotateX(-5deg); }
to { opacity: 1; transform: translateY(0) rotateX(0deg); }
}
.animate-fade-in {
animation: fade-in 1s ease-out forwards;
}
.animate-slide-up {
animation: slide-up 0.7s ease-out forwards;
opacity: 0;
}
.animation-delay-200 {
animation-delay: 0.2s;
}
.animation-delay-400 {
animation-delay: 0.4s;
}
/* Ensure animations are paused if prefers-reduced-motion is enabled */
@media (prefers-reduced-motion: reduce) {
.animate-fade-in,
.animate-slide-up,
.animation-delay-200,
.animation-delay-400,
.group-hover\:rotateY-10,
.group-hover\:scale-105,
.active\:rotateY-20,
.active\:scale-110,
.group-hover\:scale-110,
.group-hover\:scale-105,
.active\:scale-95
{
animation: none !important;
transition: none !important;
transform: none !important;
}
}
</style>관련 구성 요소
Columns 구성 요소 Neumorphism
Columns Component Neumorphism 컬럼 컴포넌트 뉴모피즘 - 미묘한 그림자를 사용하여 배경에서 돌출된 것처럼 보이는 요소를 만드는 소프트 UI 스타일입니다. 이 구성 요소는 반응형이며 어두운 테마를 지원합니다. JavaScript 코드가 필요하지 않습니다. 다크 모드의 경우 CSS 지원으로 충분합니다.