Social_Media_Dashboard
Un complesso componente del cruscotto dei social media con un'estetica monocromatica di Material Design, con layout basati su griglia, effetti di profondità e reattività con supporto della modalità oscura. Progettato per le interfacce di social networking.
Codice HTML
<div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen text-gray-900 dark:text-gray-100 font-sans">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Main Content Area -->
<div class="md:col-span-2 lg:col-span-3 flex flex-col gap-6">
<!-- Top Navigation/Search -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 flex items-center space-x-4">
<div class="relative flex-grow">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-500" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
<input type="text" placeholder="Search posts, friends, and more..." class="w-full pl-10 pr-4 py-2 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400">
</div>
<button class="p-2 rounded-full bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 hover:bg-blue-100 dark:hover:bg-blue-800 transition duration-150">
<svg class="w-6 h-6" 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="M15 17h.01M12 21v-4m-3 4v-4m0 0h6m-12 0H6m6 0C5.03 17 3 14.654 3 12S5.03 7 7.5 7h9C18.97 7 21 9.346 21 12s-2.03 5-4.5 5h-9z"></path></svg>
</button>
<button class="p-2 rounded-full bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 hover:bg-blue-100 dark:hover:bg-blue-800 transition duration-150">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
</button>
</div>
<!-- Create Post Widget -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
<h2 class="text-xl font-semibold mb-4">Create New Post</h2>
<div class="flex items-center space-x-4 mb-4">
<img class="w-12 h-12 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<input type="text" placeholder="What's on your mind?" class="flex-grow py-2 px-4 rounded-full bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400">
</div>
<div class="flex justify-between items-center">
<div class="flex space-x-4">
<button class="flex items-center space-x-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150">
<svg class="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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6l.01 0M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
<span class="text-sm hidden sm:block">Photo</span>
</button>
<button class="flex items-center space-x-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150">
<svg class="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="M7 4v16M17 4v16M3 8h4m-4 8h4m10-8h4m-4 8h4M7 8V4a1 1 0 011-1h6a1 1 0 011 1v4M7 16v4a1 1 0 001 1h6a1 1 0 001-1v-4M4 8h16M4 16h16"></path></svg>
<span class="text-sm hidden sm:block">Video</span>
</button>
<button class="flex items-center space-x-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
<span class="text-sm hidden sm:block">Location</span>
</button>
</div>
<button class="px-6 py-2 bg-blue-600 text-white dark:bg-blue-500 dark:text-white rounded-full font-medium shadow-md hover:bg-blue-700 dark:hover:bg-blue-600 transition duration-150 ease-in-out">
Post
</button>
</div>
</div>
<!-- Feed Post - Example 1 (with image) -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
<div class="flex items-center space-x-3 mb-4">
<img class="w-10 h-10 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="font-semibold">Jane Doe</p>
<p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
</div>
</div>
<p class="mb-4 text-gray-700 dark:text-gray-300">Enjoying the beautiful autumn colors! Such a peaceful afternoon spent exploring the local park. #AutumnVibes #NatureLover</p>
<img class="rounded-lg mb-4 w-full h-auto object-cover max-h-96" src="https://picsum.photos/800/500?random=1" alt="Post Image">
<div class="flex justify-between items-center text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700 pt-4">
<div class="flex space-x-6">
<button class="flex items-center space-x-1 hover:text-blue-500 transition duration-150">
<svg class="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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
<span>120</span>
</button>
<button class="flex items-center space-x-1 hover:text-blue-500 transition duration-150">
<svg class="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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
<span>45</span>
</button>
<button class="flex items-center space-x-1 hover:text-blue-500 transition duration-150">
<svg class="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="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.552 3.546m-6.552-3.546L12 10.5m7.5-2.046l.758-.426M6.44 14.35H5.05M18 10a8 8 0 10-16 0V5a2 2 0 012-2h3a2 2 0 012 2v2.185a4.85 4.85 0 01-. .815a4.85 4.85 0 01-. .815"></path></svg>
<span>15</span>
</button>
</div>
<button class="text-sm text-blue-600 dark:text-blue-400 hover:underline transition duration-150">View comments</button>
</div>
</div>
<!-- Feed Post - Example 2 (text only) -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
<div class="flex items-center space-x-3 mb-4">
<img class="w-10 h-10 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/8.jpg" alt="User Avatar">
<div>
<p class="font-semibold">John Smith</p>
<p class="text-sm text-gray-500 dark:text-gray-400">5 hours ago</p>
</div>
</div>
<p class="mb-4 text-gray-700 dark:text-gray-300">Just finished a great coding session! Feeling productive and ready to tackle the next challenge. #codinglife #developer</p>
<div class="flex justify-between items-center text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700 pt-4">
<div class="flex space-x-6">
<button class="flex items-center space-x-1 hover:text-blue-500 transition duration-150">
<svg class="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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
<span>88</span>
</button>
<button class="flex items-center space-x-1 hover:text-blue-500 transition duration-150">
<svg class="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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
<span>30</span>
</button>
<button class="flex items-center space-x-1 hover:text-blue-500 transition duration-150">
<svg class="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="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.552 3.546m-6.552-3.546L12 10.5m7.5-2.046l.758-.426M6.44 14.35H5.05M18 10a8 8 0 10-16 0V5a2 2 0 012-2h3a2 2 0 012 2v2.185a4.85 4.85 0 01-. .815a4.85 4.85 0 01-. .815"></path></svg>
<span>8</span>
</button>
</div>
<button class="text-sm text-blue-600 dark:text-blue-400 hover:underline transition duration-150">View comments</button>
</div>
</div>
</div>
<!-- Sidebar / Widgets Area -->
<div class="md:col-span-1 lg:col-span-1 flex flex-col gap-6">
<!-- Profile Card -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 text-center">
<img class="w-24 h-24 rounded-full object-cover mx-auto mb-4 border-4 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Avatar">
<h3 class="text-xl font-semibold mb-1">Alex Johnson</h3>
<p class="text-gray-600 dark:text-gray-400">Web Developer | Enthusiast</p>
<div class="flex justify-around items-center mt-4 border-t border-b border-gray-200 dark:border-gray-700 py-3">
<div>
<p class="font-semibold text-lg">1.2K</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Followers</p>
</div>
<div>
<p class="font-semibold text-lg">500</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Following</p>
</div>
<div>
<p class="font-semibold text-lg">89</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Posts</p>
</div>
</div>
<button class="mt-4 w-full px-4 py-2 bg-blue-600 text-white dark:bg-blue-500 dark:text-white rounded-full font-medium shadow hover:bg-blue-700 dark:hover:bg-blue-600 transition duration-150 ease-in-out">
View Profile
</button>
</div>
<!-- Trending Topics Widget -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
<h3 class="text-xl font-semibold mb-4">Trending Topics</h3>
<ul class="space-y-3">
<li><a href="#" class="block text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150"><span class="text-gray-500 dark:text-gray-400 font-normal">#1</span> #AIRevolution <span class="text-xs text-gray-500 dark:text-gray-400">(1.5M posts)</span></a></li>
<li><a href="#" class="block text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150"><span class="text-gray-500 dark:text-gray-400 font-normal">#2</span> #FrontendDev <span class="text-xs text-gray-500 dark:text-gray-400">(980K posts)</span></a></li>
<li><a href="#" class="block text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150"><span class="text-gray-500 dark:text-gray-400 font-normal">#3</span> #SustainableLiving <span class="text-xs text-gray-500 dark:text-gray-400">(720K posts)</span></a></li>
<li><a href="#" class="block text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150"><span class="text-gray-500 dark:text-gray-400 font-normal">#4</span> #TravelGoals <span class="text-xs text-gray-500 dark:text-gray-400">(600K posts)</span></a></li>
<li><a href="#" class="block text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150"><span class="text-gray-500 dark:text-gray-400 font-normal">#5</span> #HealthAndFitness <span class="text-xs text-gray-500 dark:text-gray-400">(550K posts)</span></a></li>
</ul>
</div>
<!-- Who to Follow Widget -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
<h3 class="text-xl font-semibold mb-4">Who to Follow</h3>
<ul class="space-y-4">
<li class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full object-cover border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
<div>
<p class="font-semibold">Sarah Green</p>
<p class="text-sm text-gray-500 dark:text-gray-400">@sarah_g</p>
</div>
</div>
<button class="px-4 py-1 text-sm bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 rounded-full hover:bg-blue-100 dark:hover:bg-blue-800 transition duration-150">
Follow
</button>
</li>
<li class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full object-cover border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/men/25.jpg" alt="User Avatar">
<div>
<p class="font-semibold">David Lee</p>
<p class="text-sm text-gray-500 dark:text-gray-400">@davidd_lee</p>
</div>
</div>
<button class="px-4 py-1 text-sm bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 rounded-full hover:bg-blue-100 dark:hover:bg-blue-800 transition duration-150">
Follow
</button>
</li>
<li class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full object-cover border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
<div>
<p class="font-semibold">Emily Chen</p>
<p class="text-sm text-gray-500 dark:text-gray-400">@emily_c</p>
</div>
</div>
<button class="px-4 py-1 text-sm bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 rounded-full hover:bg-blue-100 dark:hover:bg-blue-800 transition duration-150">
Follow
</button>
</li>
</ul>
</div>
</div>
</div>
</div>Componenti correlati
Luxury_Premium_Grayscale_Dating_Social_Data_Visualization_Component
Un componente di visualizzazione dei dati elegante e sofisticato progettato per piattaforme di appuntamenti e social, caratterizzato da una combinazione di colori in scala di grigi e un layout reattivo con supporto per la modalità oscura. Visualizza le statistiche degli utenti e le metriche di connessione.
Componenti di visualizzazione dei dati
Un componente di visualizzazione dei dati reattivo progettato con principi di Material Design come layout basati su griglia ed effetti di profondità, con supporto per temi scuri.
Skeuomorphic_Vibrant_Business_Dashboard
Un componente dashboard complesso, reattivo e scheumorfico con colori vivaci, progettato per uso aziendale/aziendale, con visualizzazioni di dati ed elementi interattivi con supporto per la modalità scura.