3D_Vibrant_Columns_Component
Un componente di colonne complesso, vivace e reattivo ispirato al 3D, adatto per la documentazione e i siti wiki, con supporto per la modalità oscura, animazioni sottili e HTML semantico.
Codice 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>Componenti correlati
Componente Colonne
Un componente Columns reattivo progettato con un'estetica retrò/vintage, che supporta sia temi chiari che scuri. Presenta immagini segnaposto e avatar rispettivamente da picsum.photos e randomuser.me.
Componente Colonne
Un semplice layout a tre colonne per una dashboard, con schede simili a 3D con colori vivaci e supporto per la modalità scura.
Componente Colonne
Un componente di colonne reattive progettato per la presentazione del portfolio con supporto della modalità scura, utilizzando una combinazione di colori in scala di grigi e Tailwind CSS.