Microinteractions_Triadic_Dashboard_Component
Un composant de tableau de bord réactif avec une palette de couleurs triadiques, intégrant des micro-interactions pour l’engagement de l’utilisateur. Comprend des éléments et des commandes de visualisation de données, avec une prise en charge complète du mode sombre.
HTML Code
<div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">
<!-- Header Section -->
<div class="flex flex-col sm:flex-row justify-between items-center mb-8 gap-4">
<h1 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-gray-100">Dashboard Overview</h1>
<div class="flex items-center space-x-4">
<button class="flex items-center space-x-2 px-4 py-2 bg-purple-600 text-white rounded-lg shadow-lg hover:bg-purple-700 active:scale-95 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
<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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
<span class="text-sm font-medium">Add Widget</span>
</button>
<button class="p-2 rounded-full bg-yellow-500 text-white hover:bg-yellow-600 active:scale-95 transition-all duration-200 shadow-md focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-50">
<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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
</button>
<img class="w-9 h-9 rounded-full border-2 border-yellow-500 transform hover:scale-105 active:scale-90 transition duration-200 cursor-pointer" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
</div>
</div>
<!-- Main Grid Area -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-max">
<!-- Metric Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 flex flex-col justify-between transform hover:scale-103 transition-all duration-300 group overflow-hidden border border-gray-200 dark:border-gray-700">
<div class="flex justify-between items-start mb-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Total Sales</h3>
<svg class="w-6 h-6 text-purple-500 group-hover:text-purple-600 transition-colors duration-200" 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="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M18 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-9-9a2 2 0 100-4 2 2 0 000 4zm0 2a2 2 0 100 4 2 2 0 000-4zm0 4a2 2 0 100 4 2 2 0 000-4z"></path></svg>
</div>
<p class="text-4xl font-bold text-gray-900 dark:text-gray-50 mb-2 group-hover:text-purple-700 dark:group-hover:text-purple-400 transition-colors duration-200">$12,345</p>
<p class="text-sm text-gray-500 dark:text-gray-400">+5.2% from last month
<span class="inline-block ml-1 text-green-500 group-hover:animate-bounce-faded">
<svg class="w-4 h-4" 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="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
</span>
</p>
</div>
<!-- Metric Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 flex flex-col justify-between transform hover:scale-103 transition-all duration-300 group overflow-hidden border border-gray-200 dark:border-gray-700">
<div class="flex justify-between items-start mb-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">New Users</h3>
<svg class="w-6 h-6 text-yellow-500 group-hover:text-yellow-600 transition-colors duration-200" 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-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857M17 20v-2c0-.653-.134-1.282-.387-1.857M12 11a4 4 0 110-8 4 4 0 010 8zm0 1c1.332 0 2.502.593 3.327 1.488L15 15h2l-2 4h-1l-2 4h-2l-2 4H6l-2-4H3l-2-4h2l2-4h2l3-3.003L12 12z"></path></svg>
</div>
<p class="text-4xl font-bold text-gray-900 dark:text-gray-50 mb-2 group-hover:text-yellow-700 dark:group-hover:text-yellow-400 transition-colors duration-200">789</p>
<p class="text-sm text-gray-500 dark:text-gray-400">+12% from last week
<span class="inline-block ml-1 text-green-500 group-hover:animate-bounce-faded">
<svg class="w-4 h-4" 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="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
</span>
</p>
</div>
<!-- Metric Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 flex flex-col justify-between transform hover:scale-103 transition-all duration-300 group overflow-hidden border border-gray-200 dark:border-gray-700">
<div class="flex justify-between items-start mb-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Active Projects</h3>
<svg class="w-6 h-6 text-green-500 group-hover:text-green-600 transition-colors duration-200" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<p class="text-4xl font-bold text-gray-900 dark:text-gray-50 mb-2 group-hover:text-green-700 dark:group-hover:text-green-400 transition-colors duration-200">23</p>
<p class="text-sm text-gray-500 dark:text-gray-400">All on track
<span class="inline-block ml-1 text-blue-500 group-hover:animate-ping-once">
<svg class="w-4 h-4" 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</span>
</p>
</div>
<!-- Activity Feed -->
<div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Recent Activity</h3>
<ul class="space-y-4">
<li class="flex items-center space-x-3 group animate-appear-from-left animation-delay-100">
<img class="w-9 h-9 rounded-full border-2 border-purple-500" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-100"><span class="font-medium text-purple-600 dark:text-purple-400">Jane Doe</span> updated a project <span class="text-yellow-600 dark:text-yellow-400 font-medium hover:underline cursor-pointer">'Website Redesign'</span>.</p>
<p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
</div>
<button class="p-1 rounded-full text-gray-400 dark:text-gray-500 invisible group-hover:visible hover:text-purple-600 dark:hover:text-purple-400 transitino-colors duration-200">
<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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
</button>
</li>
<li class="flex items-center space-x-3 group animate-appear-from-left animation-delay-200">
<img class="w-9 h-9 rounded-full border-2 border-yellow-500" src="https://randomuser.me/api/portraits/men/22.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-100"><span class="font-medium text-yellow-600 dark:text-yellow-400">John Smith</span> commented on task <span class="text-green-600 dark:text-green-400 font-medium hover:underline cursor-pointer">'Implement API'</span>.</p>
<p class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</p>
</div>
<button class="p-1 rounded-full text-gray-400 dark:text-gray-500 invisible group-hover:visible hover:text-yellow-600 dark:hover:text-yellow-400 transitino-colors duration-200">
<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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
</button>
</li>
<li class="flex items-center space-x-3 group animate-appear-from-left animation-delay-300">
<img class="w-9 h-9 rounded-full border-2 border-green-500" src="https://randomuser.me/api/portraits/women/3.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-100"><span class="font-medium text-green-600 dark:text-green-400">Alice Green</span> completed task <span class="text-purple-600 dark:text-purple-400 font-medium hover:underline cursor-pointer">'Design mockups'</span>.</p>
<p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
</div>
<button class="p-1 rounded-full text-gray-400 dark:text-gray-500 invisible group-hover:visible hover:text-green-600 dark:hover:text-green-400 transitino-colors duration-200">
<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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
</button>
</li>
</ul>
</div>
<!-- Quick Actions -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Quick Actions</h3>
<div class="grid grid-cols-2 gap-4">
<button class="flex flex-col items-center justify-center p-4 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded-lg shadow-md hover:shadow-lg hover:translate-y-[-2px] active:translate-y-[0px] transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
<svg class="w-8 h-8 mb-2 group-hover:rotate-6 transition-transform duration-200" 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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
<span class="text-sm font-medium">Generate Report</span>
</button>
<button class="flex flex-col items-center justify-center p-4 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 rounded-lg shadow-md hover:shadow-lg hover:translate-y-[-2px] active:translate-y-[0px] transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50">
<svg class="w-8 h-8 mb-2 group-hover:animate-wiggle" 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 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v11a2 2 0 002 2h10a2 2 0 002-2v-3"></path></svg>
<span class="text-sm font-medium">New Document</span>
</button>
<button class="flex flex-col items-center justify-center p-4 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-lg shadow-md hover:shadow-lg hover:translate-y-[-2px] active:translate-y-[0px] transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
<svg class="w-8 h-8 mb-2 group-hover:animate-pulse-slow" 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 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
<span class="text-sm font-medium">Edit Profile</span>
</button>
<button class="flex flex-col items-center justify-center p-4 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-lg shadow-md hover:shadow-lg hover:translate-y-[-2px] active:translate-y-[0px] transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<svg class="w-8 h-8 mb-2 group-hover:scale-110 transition-transform duration-200" 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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
<span class="text-sm font-medium">Send Message</span>
</button>
</div>
</div>
<!-- Image Card -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden transform hover:scale-103 transition-all duration-300 relative group">
<img class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" src="https://picsum.photos/600/400?random=1" alt="Placeholder Image">
<div class="p-6">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">Project Progress</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Visual representation of current project milestones and achievements.</p>
</div>
<button class="absolute bottom-4 right-4 p-2 bg-purple-500 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-50">
<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 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
</button>
</div>
<!-- Calendar/Schedule Card -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark:border-gray-700 lg:col-span-2">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Upcoming Schedule</h3>
<div class="space-y-4">
<div class="flex items-start space-x-4 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 group">
<div class="flex-none w-10 h-10 bg-purple-500 text-white rounded-full flex items-center justify-center text-sm font-bold group-hover:scale-110 transition-transform duration-200">
<p>10<br><span class="text-xs font-normal">AM</span></p>
</div>
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-100 font-medium">Team Sync Meeting</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Project Alpha, Video Call</p>
</div>
<button class="flex-none text-gray-400 dark:text-gray-500 hover:text-purple-600 dark:hover:text-purple-400 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
</button>
</div>
<div class="flex items-start space-x-4 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 group">
<div class="flex-none w-10 h-10 bg-yellow-500 text-white rounded-full flex items-center justify-center text-sm font-bold group-hover:scale-110 transition-transform duration-200">
<p>02<br><span class="text-xs font-normal">PM</span></p>
</div>
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-100 font-medium">Client Review Session</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Client XYZ, Office Mtg Room</p>
</div>
<button class="flex-none text-gray-400 dark:text-gray-500 hover:text-yellow-600 dark:hover:text-yellow-400 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
</button>
</div>
<div class="flex items-start space-x-4 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 group">
<div class="flex-none w-10 h-10 bg-green-500 text-white rounded-full flex items-center justify-center text-sm font-bold group-hover:scale-110 transition-transform duration-200">
<p>04<br><span class="text-xs font-normal">PM</span></p>
</div>
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-100 font-medium">Code Review: Feature X</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Development Team</p>
</div>
<button class="flex-none text-gray-400 dark:text-gray-500 hover:text-green-600 dark:hover:text-green-400 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
</button>
</div>
</div>
</div>
</div>
<!-- Tailwind JIT custom animations (add to tailwind.config.js) -->
<style>
@keyframes bounce-faded {
0%, 100% { transform: translateY(0); opacity: 1; }
50% { transform: translateY(-5px); opacity: 0.8; }
}
.animate-bounce-faded {
animation: bounce-faded 0.8s ease-in-out infinite;
}
@keyframes ping-once {
75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping-once {
animation: ping-once 1s cubic-bezier(0, 0, 0.2, 1);
}
@keyframes wiggle {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(3deg); }
50% { transform: rotate(-3deg); }
75% { transform: rotate(2deg); }
}
.animate-wiggle {
animation: wiggle 0.4s ease-in-out infinite;
}
@keyframes pulse-slow {
0%, 100% { opacity: 1; }
50% { opacity: .5; }
}
.animate-pulse-slow {
animation: pulse-slow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes appear-from-left {
0% { opacity: 0; transform: translateX(-20px); }
100% { opacity: 1; transform: translateX(0); }
}
.animate-appear-from-left {
animation: appear-from-left 0.5s ease-out forwards;
}
.animation-delay-100 { animation-delay: 0.1s; }
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-300 { animation-delay: 0.3s; }
</style>
</div>Composants associés
Composants fonctionnels
Un composant de portefeuille minimaliste conçu avec Tailwind CSS, avec une palette de couleurs vives et prenant en charge le mode sombre. Ce composant est destiné à présenter des travaux ou des produits et comprend des images et des espaces réservés d’avatar.
Composante gouvernementale monochrome inspirée du papier et de l’impression
Un composant de complexité moyenne imitant le papier physique et les documents imprimés, conçu pour les sites Web du gouvernement et des services publics avec une palette de couleurs monochromatique et une réactivité totale, y compris la prise en charge du mode sombre.