Skeuomorphic_Vibrant_Blog_Viz
Un componente de visualización de datos complejo y esqueuomórfico para el consumo de blogs/contenido con una combinación de colores vibrantes, diseñado para la capacidad de respuesta y el modo oscuro.
Código HTML
<div class="p-4 sm:p-8 md:p-12 bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-800 font-sans text-gray-800 dark:text-gray-200 min-h-screen">
<div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Main Content Area -->
<div class="lg:col-span-2 space-y-8">
<!-- Article Title Card -->
<div class="rounded-3xl shadow-xl bg-gradient-to-br from-white to-gray-50 dark:from-gray-700 dark:to-gray-800 p-8 transform hover:scale-[1.01] transition-all duration-300 ease-in-out border border-gray-100 dark:border-gray-700">
<h1 class="text-4xl sm:text-5xl font-extrabold mb-4 text-center text-blue-700 dark:text-blue-400 drop-shadow-lg">Understanding Data Storytelling</h1>
<div class="flex items-center justify-center space-x-4 text-sm text-gray-500 dark:text-gray-400 mb-6">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author" class="w-8 h-8 rounded-full shadow-md mr-2 border-2 border-orange-500 dark:border-orange-400">
<span>By <a href="#" class="font-semibold text-gray-700 dark:text-gray-300 hover:text-orange-600 dark:hover:text-orange-300">John Doe</a></span>
</div>
<span>•</span>
<span>May 25, 2023</span>
<span>•</span>
<span>8 min read</span>
</div>
<p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
In today's data-driven world, merely having data is not enough. The true power lies in how we communicate insights and make them accessible and actionable. This article delves into the art and science of data storytelling, transforming raw numbers into compelling narratives.
</p>
<img src="https://picsum.photos/1200/600?random=1" alt="Data Storytelling" class="w-full rounded-2xl shadow-lg mb-6 border border-gray-200 dark:border-gray-600 transform hover:rotate-1 hover:scale-[1.01] transition-all duration-500 ease-in-out">
<div class="flex justify-center space-x-4 text-gray-500 dark:text-gray-400">
<button class="flex items-center px-4 py-2 rounded-full bg-blue-100/70 dark:bg-blue-900/70 hover:bg-blue-200 dark:hover:bg-blue-800 shadow-md text-blue-700 dark:text-blue-300 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12.586l4.293-4.293a1 1 0 011.414 1.414l-5 5a1 1 0 01-1.414 0l-5-5a1 1 0 011.414-1.414L10 12.586z"></path></svg>
Share
</button>
<button class="flex items-center px-4 py-2 rounded-full bg-green-100/70 dark:bg-green-900/70 hover:bg-green-200 dark:hover:bg-green-800 shadow-md text-green-700 dark:text-green-300 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M5 4a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2V6a2 2 0 00-2-2H5zm0 10V6h10v8H5zm0 0l-2 2h14l-2-2H5z"></path></svg>
Comment
</button>
</div>
</div>
<!-- Interactive Chart Panel -->
<div class="rounded-3xl shadow-xl bg-gradient-to-br from-white to-gray-50 dark:from-gray-700 dark:to-gray-800 p-8 border border-gray-100 dark:border-gray-700">
<h2 class="text-3xl font-bold mb-6 text-purple-700 dark:text-purple-400 drop-shadow-md text-center">Engagement Trends: A Visual Breakdown</h2>
<div class="relative bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 p-6 rounded-2xl shadow-inner border border-gray-200 dark:border-gray-700 ring-2 ring-inset ring-purple-300 dark:ring-purple-600">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/clean-gray-paper.png')] opacity-20 dark:opacity-10 pointer-events-none rounded-2xl"></div>
<div class="relative h-80 flex items-center justify-center">
<!-- Placeholder Chart SVG/Image -->
<img src="https://picsum.photos/800/400?random=2" alt="Placeholder Chart" class="w-full h-full object-contain rounded-xl shadow-lg border border-gray-300 dark:border-gray-600 animate-fade-in" style="animation-duration: 1.5s;">
<div class="absolute bottom-2 right-2 text-xs text-gray-500 dark:text-gray-400 bg-gray-50/70 dark:bg-gray-800/70 px-2 py-1 rounded-lg backdrop-blur-sm shadow-sm">Data from Q1 2023</div>
</div>
<div class="flex justify-evenly mt-6 text-sm sm:text-base">
<button class="flex flex-col items-center p-3 rounded-xl bg-purple-200/70 dark:bg-purple-900/70 hover:bg-purple-300 dark:hover:bg-purple-800 shadow-md text-purple-800 dark:text-purple-300 transform hover:scale-105 transition-all duration-200 ease-in-out">
<svg class="w-6 h-6 mb-1" fill="currentColor" viewBox="0 0 20 20"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path></svg>
<span class="font-semibold">Views</span>
<span class="text-xs mt-1">250k</span>
</button>
<button class="flex flex-col items-center p-3 rounded-xl bg-orange-200/70 dark:bg-orange-900/70 hover:bg-orange-300 dark:hover:bg-orange-800 shadow-md text-orange-800 dark:text-orange-300 transform hover:scale-105 transition-all duration-200 ease-in-out">
<svg class="w-6 h-6 mb-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
<span class="font-semibold">Reads</span>
<span class="text-xs mt-1">85k</span>
</button>
<button class="flex flex-col items-center p-3 rounded-xl bg-rose-200/70 dark:bg-rose-900/70 hover:bg-rose-300 dark:hover:bg-rose-800 shadow-md text-rose-800 dark:text-rose-300 transform hover:scale-105 transition-all duration-200 ease-in-out">
<svg class="w-6 h-6 mb-1" fill="currentColor" viewBox="0 0 20 20"><path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd"></path></svg>
<span class="font-semibold">Shares</span>
<span class="text-xs mt-1">12k</span>
</button>
</div>
</div>
</div>
<!-- Key Takeaways & Metrics Panel -->
<div class="rounded-3xl shadow-xl bg-gradient-to-br from-white to-gray-50 dark:from-gray-700 dark:to-gray-800 p-8 border border-gray-100 dark:border-gray-700">
<h2 class="text-3xl font-bold mb-6 text-teal-700 dark:text-teal-400 drop-shadow-md text-center">Key Performance Indicators</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Metric 1 -->
<div class="relative bg-gradient-to-br from-teal-50 to-emerald-50 dark:from-teal-900/70 dark:to-emerald-900/70 rounded-2xl p-5 shadow-lg border border-teal-200 dark:border-teal-700 flex flex-col items-center justify-center transform hover:translate-y-[-5px] transition-all duration-200 ease-in-out hover:shadow-xl">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cross-stitch.png')] opacity-10 dark:opacity-5 rounded-2xl"></div>
<svg class="w-12 h-12 text-teal-600 dark:text-teal-300 mb-3" fill="currentColor" viewBox="0 0 20 20"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<p class="text-xl font-bold text-teal-800 dark:text-teal-200 text-center">Conversion Rate</p>
<p class="text-4xl font-extrabold text-teal-900 dark:text-teal-100 drop-shadow-sm">12.4%</p>
<p class="text-sm text-gray-600 dark:text-gray-400">+1.2% from last month</p>
</div>
<!-- Metric 2 -->
<div class="relative bg-gradient-to-br from-yellow-50 to-orange-50 dark:from-yellow-900/70 dark:to-orange-900/70 rounded-2xl p-5 shadow-lg border border-yellow-200 dark:border-yellow-700 flex flex-col items-center justify-center transform hover:translate-y-[-5px] transition-all duration-200 ease-in-out hover:shadow-xl">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cross-stitch.png')] opacity-10 dark:opacity-5 rounded-2xl"></div>
<svg class="w-12 h-12 text-yellow-600 dark:text-yellow-300 mb-3" fill="currentColor" viewBox="0 0 20 20"><path d="M2.003 5.884L10 2.052 17.997 5.884A2 2 0 0118 8v7a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 01.003-2.116zM6 10a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1z"></path></svg>
<p class="text-xl font-bold text-yellow-800 dark:text-yellow-200 text-center">Avg. Time on Page</p>
<p class="text-4xl font-extrabold text-yellow-900 dark:text-yellow-100 drop-shadow-sm">3:45 min</p>
<p class="text-sm text-gray-600 dark:text-gray-400">-0:15 from last month</p>
</div>
<!-- Metric 3 -->
<div class="relative bg-gradient-to-br from-red-50 to-pink-50 dark:from-red-900/70 dark:to-pink-900/70 rounded-2xl p-5 shadow-lg border border-red-200 dark:border-red-700 flex flex-col items-center justify-center transform hover:translate-y-[-5px] transition-all duration-200 ease-in-out hover:shadow-xl">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cross-stitch.png')] opacity-10 dark:opacity-5 rounded-2xl"></div>
<svg class="w-12 h-12 text-red-600 dark:text-red-300 mb-3" fill="currentColor" viewBox="0 0 20 20"><path d="M9 6a3 3 0 10-6 0v2l-2 5h12l-2-5V6a3 3 0 00-3-3H9z"></path><path d="M11 11.001V15h2V11.001h-2zm-4 0V15h2V11.001H7z"></path></svg>
<p class="text-xl font-bold text-red-800 dark:text-red-200 text-center">Bounce Rate</p>
<p class="text-4xl font-extrabold text-red-900 dark:text-red-100 drop-shadow-sm">38.2%</p>
<p class="text-sm text-gray-600 dark:text-gray-400">+0.8% from last month</p>
</div>
</div>
</div>
</div>
<!-- Sidebar / Related Content -->
<div class="space-y-8">
<!-- Related Articles Panel -->
<div class="rounded-3xl shadow-xl bg-gradient-to-br from-white to-gray-50 dark:from-gray-700 dark:to-gray-800 p-6 border border-gray-100 dark:border-gray-700">
<h2 class="text-2xl font-bold mb-6 text-orange-700 dark:text-orange-400 drop-shadow-md text-center">More Insights</h2>
<ul class="space-y-4">
<li class="relative bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 p-4 rounded-xl shadow-inner border border-gray-200 dark:border-gray-700 transition-all duration-200 ease-in-out hover:scale-[1.02] hover:shadow-lg">
<a href="#" class="block">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-300 mb-1">The Future of Data Visualization</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Exploring new frontiers in interactive data experiences.</p>
</a>
</li>
<li class="relative bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 p-4 rounded-xl shadow-inner border border-gray-200 dark:border-gray-700 transition-all duration-200 ease-in-out hover:scale-[1.02] hover:shadow-lg">
<a href="#" class="block">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-300 mb-1">Ethical Considerations in AI Analytics</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Navigating bias and privacy in advanced algorithms.</p>
</a>
</li>
<li class="relative bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 p-4 rounded-xl shadow-inner border border-gray-200 dark:border-gray-700 transition-all duration-200 ease-in-out hover:scale-[1.02] hover:shadow-lg">
<a href="#" class="block">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-300 mb-1">From Data Lakes to Data Oceans</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Scaling an ecosystem for petabytes of information.</p>
</a>
</li>
</ul>
</div>
<!-- Interactive Filter / Tag Cloud -->
<div class="rounded-3xl shadow-xl bg-gradient-to-br from-white to-gray-50 dark:from-gray-700 dark:to-gray-800 p-6 border border-gray-100 dark:border-gray-700">
<h2 class="text-2xl font-bold mb-6 text-green-700 dark:text-green-400 drop-shadow-md text-center">Explore Topics</h2>
<div class="flex flex-wrap gap-3 justify-center">
<button class="px-5 py-2 rounded-full bg-green-100/70 dark:bg-green-900/70 text-green-800 dark:text-green-300 font-medium shadow-md hover:shadow-lg outline outline-2 outline-green-300 dark:outline-green-600 transition-all duration-200 ease-in-out transform hover:scale-105 active:scale-95">
Analytics
</button>
<button class="px-5 py-2 rounded-full bg-blue-100/70 dark:bg-blue-900/70 text-blue-800 dark:text-blue-300 font-medium shadow-md hover:shadow-lg outline outline-2 outline-blue-300 dark:outline-blue-600 transition-all duration-200 ease-in-out transform hover:scale-105 active:scale-95">
Visualization
</button>
<button class="px-5 py-2 rounded-full bg-purple-100/70 dark:bg-purple-900/70 text-purple-800 dark:text-purple-300 font-medium shadow-md hover:shadow-lg outline outline-2 outline-purple-300 dark:outline-purple-600 transition-all duration-200 ease-in-out transform hover:scale-105 active:scale-95">
Storytelling
</button>
<button class="px-5 py-2 rounded-full bg-orange-100/70 dark:bg-orange-900/70 text-orange-800 dark:text-orange-300 font-medium shadow-md hover:shadow-lg outline outline-2 outline-orange-300 dark:outline-orange-600 transition-all duration-200 ease-in-out transform hover:scale-105 active:scale-95">
Big Data
</button>
<button class="px-5 py-2 rounded-full bg-rose-100/70 dark:bg-rose-900/70 text-rose-800 dark:text-rose-300 font-medium shadow-md hover:shadow-lg outline outline-2 outline-rose-300 dark:outline-rose-600 transition-all duration-200 ease-in-out transform hover:scale-105 active:scale-95">
Trends
</button>
<button class="px-5 py-2 rounded-full bg-teal-100/70 dark:bg-teal-900/70 text-teal-800 dark:text-teal-300 font-medium shadow-md hover:shadow-lg outline outline-2 outline-teal-300 dark:outline-teal-600 transition-all duration-200 ease-in-out transform hover:scale-105 active:scale-95">
Insights
</button>
</div>
</div>
<!-- Contact / Newsletter Signup -->
<div class="rounded-3xl shadow-xl bg-gradient-to-br from-white to-gray-50 dark:from-gray-700 dark:to-gray-800 p-6 border border-gray-100 dark:border-gray-700 text-center">
<h2 class="text-2xl font-bold mb-4 text-pink-700 dark:text-pink-400 drop-shadow-md">Stay Updated!</h2>
<p class="mb-5 text-gray-700 dark:text-gray-300">Get the latest data visualization insights directly to your inbox.</p>
<form class="space-y-4">
<input type="email" placeholder="Your email address" class="w-full px-5 py-3 rounded-full bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 shadow-inner focus:outline-none focus:ring-2 focus:ring-pink-500 dark:focus:ring-pink-400 transition-all duration-200 text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500">
<button type="submit" class="w-full px-5 py-3 rounded-full bg-gradient-to-r from-pink-500 to-rose-600 dark:from-pink-600 dark:to-rose-700 text-white font-bold text-lg shadow-lg hover:shadow-xl transform hover:scale-[1.02] transition-all duration-300 ease-in-out active:scale-98 relative overflow-hidden group">
<span class="relative z-10">Subscribe Now</span>
<span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
</button>
</form>
</div>
</div>
</div>
<!-- Subtle footer -->
<footer class="mt-16 text-center text-sm text-gray-500 dark:text-gray-400">
<p>© 2023 DataInsight Hub. All rights reserved.</p>
</footer>
</div>
<!-- Custom Styles for Animation (optional, for the fade-in effect on chart) -->
<style>
@keyframes fade-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
animation: fade-in 0.8s ease-out forwards;
}
</style>Componentes relacionados
Componente de componentes de visualización de datos
Componente de visualización de datos de glassmorphism para blog/contenido
Componente de visualización de datos
Componente de visualización de datos de neumorfismo con efectos responsivos y compatibilidad con temas oscuros.
Componentes de visualización de datos
Un componente de visualización de datos de comercio electrónico simple y receptivo con un estilo de diseño de morfismo de vidrio y un esquema de color monocromático, con soporte de modo oscuro.