Composant Mentions de l’utilisateur
Un composant simple et réactif avec un design glassmorphism, une palette de couleurs bleues d’entreprise et une prise en charge du mode sombre, adapté aux interfaces de tableau de bord.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-blue-950 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-sm mx-auto p-6 rounded-xl shadow-2xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 border border-blue-200 dark:bg-gray-800 dark:bg-opacity-30 dark:border-blue-700 transform transition-all duration-300 hover:scale-105">
<h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-6 text-center tracking-wide">
Recent Mentions
</h3>
<div class="space-y-4">
<!-- Mention Item 1 -->
<div class="flex items-center space-x-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-40 p-3 rounded-lg shadow-md transition-all duration-200 hover:bg-opacity-40 dark:hover:bg-opacity-50">
<img class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-blue-900 dark:text-blue-100 font-medium text-sm sm:text-base">@john_doe <span class="text-xs text-blue-700 dark:text-blue-300 ml-1">1h ago</span></p>
<p class="text-blue-700 dark:text-blue-300 text-sm overflow-hidden text-ellipsis whitespace-nowrap">Mentioned you in a report update.</p>
</div>
</div>
<!-- Mention Item 2 -->
<div class="flex items-center space-x-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-40 p-3 rounded-lg shadow-md transition-all duration-200 hover:bg-opacity-40 dark:hover:bg-opacity-50">
<img class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-blue-900 dark:text-blue-100 font-medium text-sm sm:text-base">@jane_smith <span class="text-xs text-blue-700 dark:text-blue-300 ml-1">3h ago</span></p>
<p class="text-blue-700 dark:text-blue-300 text-sm overflow-hidden text-ellipsis whitespace-nowrap">Asked for your feedback on the new design.</p>
</div>
</div>
<!-- Mention Item 3 -->
<div class="flex items-center space-x-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-40 p-3 rounded-lg shadow-md transition-all duration-200 hover:bg-opacity-40 dark:hover:bg-opacity-50">
<img class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-500" src="https://randomuser.me/api/portraits/men/8.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-blue-900 dark:text-blue-100 font-medium text-sm sm:text-base">@alex_williams <span class="text-xs text-blue-700 dark:text-blue-300 ml-1">Yesterday</span></p>
<p class="text-blue-700 dark:text-blue-300 text-sm overflow-hidden text-ellipsis whitespace-nowrap">Shared a useful resource in the team chat.</p>
</div>
</div>
</div>
<button class="mt-8 w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-lg transform transition-all duration-300 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
View All Mentions
</button>
</div>
</div>Composants associés
Composant Mentions de l’utilisateur
Un composant de mention utilisateur avec conception 3D, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Mentions de l’utilisateur
Un composant simple et réactif avec une conception Skeuomorphism, un schéma de couleurs analogue et la prise en charge du mode sombre.
Composant Mentions de l’utilisateur
Un composant simple et réactif avec un style de glassmorphisme vibrant, adapté aux applications de médias sociaux. Inclut la prise en charge du mode sombre.