用于电子商务的简单响应式中态信息图表组件,使用类似的配色方案并支持深色模式。
<div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-800 font-sans antialiased text-gray-800 dark:text-gray-200 transition-colors duration-300"> <div class="max-w-4xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> <!-- Infographic Card 1: Sales --> <div class="group p-6 rounded-3xl shadow-xl bg-gradient-to-br from-indigo-100 to-purple-100 dark:from-gray-700 dark:to-gray-900 shadow-gray-300/60 dark:shadow-gray-900/60 dark:hover:shadow-indigo-700/50 hover:shadow-indigo-300/80 transition-all duration-300 transform hover:-translate-y-1 hover:scale-105 relative overflow-hidden"> <div class="absolute inset-0 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-600 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl"></div> <div class="relative z-10 flex flex-col items-center text-center"> <div class="w-16 h-16 rounded-full bg-indigo-200 dark:bg-indigo-600 flex items-center justify-center mb-4 shadow-inner shadow-indigo-300/40 dark:shadow-indigo-900/40 group-hover:bg-indigo-300 dark:group-hover:bg-indigo-700 transition-colors duration-300"> <svg class="w-8 h-8 text-indigo-700 dark:text-indigo-200 group-hover:text-indigo-800 dark:group-hover:text-indigo-100" 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="M11 3.055A9.001 9.001 0 0119 12h-8V3.055z"> </path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"> </path> </svg> </div> <h3 class="text-2xl font-bold mb-2 text-indigo-800 dark:text-indigo-200">+25% Sales Growth</h3> <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">Year-over-year increase in total sales volume. A strong indication of market expansion and product demand.</p> </div> </div> <!-- Infographic Card 2: Customers --> <div class="group p-6 rounded-3xl shadow-xl bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-700 dark:to-gray-900 shadow-gray-300/60 dark:shadow-gray-900/60 dark:hover:shadow-purple-700/50 hover:shadow-purple-300/80 transition-all duration-300 transform hover:-translate-y-1 hover:scale-105 relative overflow-hidden"> <div class="absolute inset-0 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-600 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl"></div> <div class="relative z-10 flex flex-col items-center text-center"> <div class="w-16 h-16 rounded-full bg-purple-200 dark:bg-purple-600 flex items-center justify-center mb-4 shadow-inner shadow-purple-300/40 dark:shadow-purple-900/40 group-hover:bg-purple-300 dark:group-hover:bg-purple-700 transition-colors duration-300"> <svg class="w-8 h-8 text-purple-700 dark:text-purple-200 group-hover:text-purple-800 dark:group-hover:text-purple-100" 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 20h5v-2a3 3 0 00-3-3H8a3 3 0 00-3 3v2h5m0-9a4 4 0 110-8 4 4 0 010 8zm-2 10l3-3m0 0l3 3m-3-3v8"></path> </svg> </div> <h3 class="text-2xl font-bold mb-2 text-purple-800 dark:text-purple-200">50k+ Happy Customers</h3> <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">Our growing community of satisfied buyers. Building trust and loyalty with exceptional service and products.</p> </div> </div> <!-- Infographic Card 3: Ratings --> <div class="group p-6 rounded-3xl shadow-xl bg-gradient-to-br from-pink-100 to-rose-100 dark:from-gray-700 dark:to-gray-900 shadow-gray-300/60 dark:shadow-gray-900/60 dark:hover:shadow-rose-700/50 hover:shadow-rose-300/80 transition-all duration-300 transform hover:-translate-y-1 hover:scale-105 relative overflow-hidden"> <div class="absolute inset-0 bg-gradient-to-br from-pink-50 to-rose-50 dark:from-gray-600 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl"></div> <div class="relative z-10 flex flex-col items-center text-center"> <div class="w-16 h-16 rounded-full bg-pink-200 dark:bg-pink-600 flex items-center justify-center mb-4 shadow-inner shadow-pink-300/40 dark:shadow-pink-900/40 group-hover:bg-pink-300 dark:group-hover:bg-pink-700 transition-colors duration-300"> <svg class="w-8 h-8 text-pink-700 dark:text-pink-200 group-hover:text-pink-800 dark:group-hover:text-pink-100" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M10 2.5l2.69 5.5l6.09.88l-4.41 4.3l1.04 6.07L10 18.27l-5.41 2.85l1.04-6.07l-4.41-4.3l6.09-.88L10 2.5z" clip-rule="evenodd"></path> </svg> </div> <h3 class="text-2xl font-bold mb-2 text-pink-800 dark:text-pink-200">4.9/5 Average Rating</h3> <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">Consistently high product ratings from verified purchases. Reflecting superior quality and user satisfaction.</p> </div> </div> </div> </div>
一个具有粗犷主义风格的信息图组件,具有高对比度、不同寻常的布局,支持响应式与黑暗模式,使用Tailwind CSS。
一个简单、响应式的信息图表组件,适用于加密货币/区块链应用程序,具有深色模式 UI 和森林/绿色调色板。显示关键指标,如总事务数、每日交易量和活跃用户数。
一个简单的、响应式的复古信息图组件,适用于支持深色模式的作品集。使用互补色方案和最少的元素。