Social_Connection_Chart_Component
Un composant de graphique de connexion sociale de complexité modérée avec un design organique inspiré de la nature, avec du noir, du blanc et une seule couleur d’accent vive. Conçu pour les plateformes de rencontres et les plateformes sociales, il met en valeur les connexions visuellement avec des lignes fluides et des avatars d’utilisateurs. Entièrement réactif avec prise en charge du mode sombre.
HTML Code
<div class="p-4 md:p-8 lg:p-12 min-h-screen bg-gray-50 flex items-center justify-center dark:bg-gray-900 overflow-hidden">
<div class="max-w-6xl w-full mx-auto p-6 md:p-8 rounded-3xl bg-white shadow-xl dark:bg-gray-800 transition-colors duration-300">
<div class="flex justify-between items-center mb-6">
<h2 class="text-3xl lg:text-4xl font-extrabold text-gray-900 dark:text-white transition-colors duration-300 tracking-tight leading-tight">
Your Connection Ecosystem
</h2>
<button class="px-4 py-2 rounded-full text-sm font-semibold bg-pink-500 text-white shadow-md hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-75 transition-all duration-300 transform hover:scale-105">
Expand View
</button>
</div>
<p class="text-md md:text-lg mb-8 text-gray-600 dark:text-gray-300 transition-colors duration-300 leading-snug">
Visualize the organic flow of your social connections and discover new possibilities within your network.
</p>
<div class="relative w-full h-80 sm:h-96 md:h-[500px] lg:h-[600px] flex items-center justify-center p-4 border border-gray-200 rounded-2xl dark:border-gray-700 overflow-hidden bg-gradient-to-br from-gray-50 to-white dark:from-gray-850 dark:to-gray-800">
<!-- Main Node -->
<div class="absolute z-20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center group cursor-pointer">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="You" class="w-24 h-24 sm:w-28 sm:h-28 rounded-full border-4 border-pink-500 shadow-lg ring ring-pink-500 ring-opacity-50 transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl group-hover:ring-8" />
<span class="mt-2 text-sm md:text-base font-semibold text-gray-800 dark:text-white transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-2 whitespace-nowrap">You</span>
</div>
<!-- Connection Nodes (Organic Placement) -->
<div class="absolute z-10 w-full h-full">
<!-- Path 1 -->
<svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M 48 50 C 30 20, 10 30, 25 15" stroke="#EC4899" stroke-width="1" fill="none" class="opacity-70 dark:opacity-50" style="filter:drop-shadow(0 0 4px #EC4899);"/>
</svg>
<div class="absolute top-[10%] left-[18%] md:top-[12%] md:left-[10%] flex flex-col items-center group cursor-pointer">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Alice" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
<span class="mt-1 text-xs md:text-sm text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">Alice</span>
</div>
<!-- Path 2 -->
<svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M 52 50 C 70 80, 85 70, 75 85" stroke="#EC4899" stroke-width="1" fill="none" class="opacity-70 dark:opacity-50" style="filter:drop-shadow(0 0 4px #EC4899);"/>
</svg>
<div class="absolute bottom-[10%] right-[18%] md:bottom-[12%] md:right-[10%] flex flex-col items-center group cursor-pointer">
<img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Bob" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
<span class="mt-1 text-xs md:text-sm text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">Bob</span>
</div>
<!-- Path 3 -->
<svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M 50 48 C 20 70, 30 90, 15 75" stroke="#EC4899" stroke-width="1" fill="none" class="opacity-70 dark:opacity-50" style="filter:drop-shadow(0 0 4px #EC4899);"/>
</svg>
<div class="absolute bottom-[10%] left-[18%] md:bottom-[12%] md:left-[10%] flex flex-col items-center group cursor-pointer">
<img src="https://randomuser.me/api/portraits/women/11.jpg" alt="Carol" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
<span class="mt-1 text-xs md:text-sm text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">Carol</span>
</div>
<!-- Path 4 -->
<svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M 50 52 C 80 30, 70 10, 85 25" stroke="#EC4899" stroke-width="1" fill="none" class="opacity-70 dark:opacity-50" style="filter:drop-shadow(0 0 4px #EC4899);"/>
</svg>
<div class="absolute top-[10%] right-[18%] md:top-[12%] md:right-[10%] flex flex-col items-center group cursor-pointer">
<img src="https://randomuser.me/api/portraits/men/50.jpg" alt="David" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
<span class="mt-1 text-xs md:text-sm text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">David</span>
</div>
<!-- Path 5 -->
<svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M 50 50 C 25 5, 20 50, 40 10" stroke="#EC4899" stroke-width="0.5" fill="none" class="opacity-50 dark:opacity-30" style="filter:drop-shadow(0 0 2px #EC4899);"/>
</svg>
<div class="absolute top-[5%] left-[30%] md:top-[2%] md:left-[35%] flex flex-col items-center group cursor-pointer">
<img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Eve" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-sm transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
<span class="mt-1 text-xs text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">Eve</span>
</div>
<!-- Path 6 -->
<svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M 50 50 C 75 95, 80 50, 60 90" stroke="#EC4899" stroke-width="0.5" fill="none" class="opacity-50 dark:opacity-30" style="filter:drop-shadow(0 0 2px #EC4899);"/>
</svg>
<div class="absolute bottom-[5%] right-[30%] md:bottom-[2%] md:right-[35%] flex flex-col items-center group cursor-pointer">
<img src="https://randomuser.me/api/portraits/men/90.jpg" alt="Frank" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-sm transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
<span class="mt-1 text-xs text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">Frank</span>
</div>
</div>
</div>
<div class="mt-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<div class="p-5 rounded-xl bg-gray-100 dark:bg-gray-700 shadow-sm">
<h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Total Connections</h4>
<p class="text-3xl font-extrabold text-pink-500">236</p>
<p class="text-sm text-gray-500 dark:text-gray-400">+12 since last week</p>
</div>
<div class="p-5 rounded-xl bg-gray-100 dark:bg-gray-700 shadow-sm">
<h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Mutual Interests</h4>
<p class="text-3xl font-extrabold text-pink-500">78%</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Avg. across your network</p>
</div>
<div class="p-5 rounded-xl bg-gray-100 dark:bg-gray-700 shadow-sm">
<h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">New Connections this Month</h4>
<p class="text-3xl font-extrabold text-pink-500">18</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Ready to mingle</p>
</div>
</div>
<div class="mt-8 text-center">
<a href="#" class="inline-flex items-center px-6 py-3 rounded-full text-lg font-semibold bg-gray-900 text-white dark:bg-pink-500 dark:text-white shadow-lg hover:bg-gray-700 dark:hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-all duration-300 transform hover:scale-105">
Explore New Matches
<svg class="ml-2 -mr-1 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>
</div>Composants associés
Composant Composants de visualisation de données
Un composant de visualisation de données réactif, compatible avec le mode sombre pour les blogs, avec un design rétro/vintage avec une palette de couleurs complémentaires et des éléments interactifs complexes.
Composant Composants de visualisation de données de commerce électronique
Un composant de visualisation de données pour le commerce électronique, stylisé avec les principes de conception matérielle, les tons terreux et la prise en charge réactive du mode sombre à l’aide de Tailwind CSS.
Composant Composants de visualisation de données
Un composant de visualisation de données rétro-vintage pour les médias sociaux, avec une palette de couleurs complémentaires et une complexité modérée. Il est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS.