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
Composants de visualisation de données
Composants de visualisation de données de style Neumorphism pour un portefeuille avec prise en charge du thème sombre
Composant Composants de visualisation de données
Un composant simple de visualisation de données conçu pour le commerce électronique, doté d’une interface en mode sombre avec des couleurs vives.
Composante Visualisation de Données - Agriculture Industrielle
Un composant de visualisation de données à l’esthétique industrielle et brute, utilisant une palette de couleurs violet/violet, adapté à l’agriculture et aux sites Web agricoles. Il affiche les indicateurs clés dans une mise en page réactive avec prise en charge du mode sombre.