Composants Mentions des utilisateurs Composant Mentions de l’utilisateur

Composant Mentions de l’utilisateur

Un utilisateur complexe mentionne un composant conçu pour les tableaux de bord avec prise en charge du mode sombre et schéma de couleurs triadique.

Aperçu

HTML Code

<div class="bg-gray-800 dark:bg-gray-900 text-white p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold mb-4">User Mentions</h2>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-700">
            <thead class="bg-gray-700">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Avatar</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Username</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Mentioned At</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-gray-800 divide-y divide-gray-700">
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-white">@johndoe</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">2 hours ago</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">View</button>
                    </td>
                </tr>
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-white">@janedoe</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">3 hours ago</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">View</button>
                    </td>
                </tr>
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/52.jpg" alt="User Avatar">
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-white">@alexsmith</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">5 hours ago</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">View</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </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.

Ouvrir

Composant Mentions de l’utilisateur

Un composant conçu avec des micro-interactions, avec des effets réactifs et une prise en charge du thème sombre, construit à l’aide de Tailwind CSS.

Ouvrir

Composant Mentions de l’utilisateur

Un composant conçu avec un style Glassmorphism avec des éléments translucides givrés ressemblant à du verre avec des effets de flou. Il comprend un support de thème sombre et est réactif, ce qui le rend adapté aux sites Web de commerce électronique.

Ouvrir