ArtDeco_EarthTones_Cards_Technology_SaaS
기술/SaaS 애플리케이션을 위한 간단하고 반응이 빠른 카드 구성 요소로, 아르데코 기하학적 패턴과 자연스러운 흙색 구성표에서 영감을 받았습니다. 다크 모드 지원이 포함됩니다.
HTML 코드
<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-950 min-h-screen flex items-center justify-center font-serif">
<div class="container mx-auto px-4 py-8 sm:py-12 md:py-16">
<h2 class="text-center text-3xl sm:text-4xl md:text-5xl font-extrabold text-stone-800 dark:text-stone-100 mb-6 sm:mb-8 md:mb-12 tracking-wide">
<span class="block">Our <span class="text-amber-700 dark:text-amber-500">SaaS</span> Offerings</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">
<!-- Card 1: Core Analytics -->
<div class="group bg-stone-50 dark:bg-stone-800 rounded-lg overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-amber-500/30 border-2 border-stone-200 dark:border-stone-700 relative">
<div class="absolute inset-0 bg-gradient-to-br from-amber-100/30 via-stone-100/30 to-zinc-100/30 dark:from-amber-900/20 dark:via-stone-900/20 dark:to-zinc-900/20 rounded-lg opacity-0 transition-opacity duration-300 group-hover:opacity-100" style="clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%);"></div>
<div class="relative p-6 sm:p-8 z-10">
<img class="w-16 h-16 mb-4 sm:mb-6 mx-auto" src="https://picsum.photos/id/25/64/64" alt="Analytics Icon">
<h3 class="text-2xl sm:text-3xl font-bold text-amber-800 dark:text-amber-500 mb-3 text-center tracking-wider">Core Analytics</h3>
<p class="text-stone-700 dark:text-stone-300 text-base sm:text-lg leading-relaxed mb-6 text-center">
Gain profound insights with our advanced, real-time data analytics. Understand patterns, predict trends.
</p>
<ul class="space-y-3 mb-6">
<li class="flex items-center text-stone-600 dark:text-stone-400">
<svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
Intuitive Dashboards
</li>
<li class="flex items-center text-stone-600 dark:text-stone-400">
<svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
Real-time Processing
</li>
<li class="flex items-center text-stone-600 dark:text-stone-400">
<svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
Customizable Reports
</li>
</ul>
<button class="block w-full py-3 px-6 rounded-md bg-amber-700 text-stone-50 font-semibold text-lg uppercase tracking-wider shadow-md hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:bg-amber-600 dark:hover:bg-amber-700 dark:focus:ring-amber-400 transition-colors duration-300">
Learn More
</button>
</div>
</div>
<!-- Card 2: Secure Cloud Storage -->
<div class="group bg-stone-50 dark:bg-stone-800 rounded-lg overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-amber-500/30 border-2 border-stone-200 dark:border-stone-700 relative">
<div class="absolute inset-0 bg-gradient-to-br from-amber-100/30 via-stone-100/30 to-zinc-100/30 dark:from-amber-900/20 dark:via-stone-900/20 dark:to-zinc-900/20 rounded-lg opacity-0 transition-opacity duration-300 group-hover:opacity-100" style="clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%);"></div>
<div class="relative p-6 sm:p-8 z-10">
<img class="w-16 h-16 mb-4 sm:mb-6 mx-auto" src="https://picsum.photos/id/29/64/64" alt="Storage Icon">
<h3 class="text-2xl sm:text-3xl font-bold text-amber-800 dark:text-amber-500 mb-3 text-center tracking-wider">Secure Cloud Storage</h3>
<p class="text-stone-700 dark:text-stone-300 text-base sm:text-lg leading-relaxed mb-6 text-center">
Keep your data safe with our robust, encrypted cloud storage solutions.
</p>
<ul class="space-y-3 mb-6">
<li class="flex items-center text-stone-600 dark:text-stone-400">
<svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
End-to-End Encryption
</li>
<li class="flex items-center text-stone-600 dark:text-stone-400">
<svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
Automated Backups
</li>
<li class="flex items-center text-stone-600 dark:text-stone-400">
<svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
Access Controls
</li>
</ul>
<button class="block w-full py-3 px-6 rounded-md bg-amber-700 text-stone-50 font-semibold text-lg uppercase tracking-wider shadow-md hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:bg-amber-600 dark:hover:bg-amber-700 dark:focus:ring-amber-400 transition-colors duration-300">
Explore Features
</button>
</div>
</div>
<!-- Card 3: Collaborative Workspace -->
<div class="group bg-stone-50 dark:bg-stone-800 rounded-lg overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-amber-500/30 border-2 border-stone-200 dark:border-stone-700 relative">
<div class="absolute inset-0 bg-gradient-to-br from-amber-100/30 via-stone-100/30 to-zinc-100/30 dark:from-amber-900/20 dark:via-stone-900/20 dark:to-zinc-900/20 rounded-lg opacity-0 transition-opacity duration-300 group-hover:opacity-100" style="clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%);"></div>
<div class="relative p-6 sm:p-8 z-10">
<img class="w-16 h-16 mb-4 sm:mb-6 mx-auto" src="https://picsum.photos/id/35/64/64" alt="Collaboration Icon">
<h3 class="text-2xl sm:text-3xl font-bold text-amber-800 dark:text-amber-500 mb-3 text-center tracking-wider">Collaborate Seamlessly</h3>
<p class="text-stone-700 dark:text-stone-300 text-base sm:text-lg leading-relaxed mb-6 text-center">
Empower your team with a shared, dynamic workspace for optimal productivity.
</p>
<ul class="space-y-3 mb-6">
<li class="flex items-center text-stone-600 dark:text-stone-400">
<svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
Live Document Editing
</li>
<li class="flex items-center text-stone-600 dark:text-stone-400">
<svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
Integrated Communication
</li>
<li class="flex items-center text-stone-600 dark:text-stone-400">
<svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
Task Management
</li>
</ul>
<button class="block w-full py-3 px-6 rounded-md bg-amber-700 text-stone-50 font-semibold text-lg uppercase tracking-wider shadow-md hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:bg-amber-600 dark:hover:bg-amber-700 dark:focus:ring-amber-400 transition-colors duration-300">
Start Collaborating
</button>
</div>
</div>
</div>
</div>
</div>