Rechercher des composants

Catégories

Composants Notifications

Notifications

De petits widgets qui alertent les utilisateurs sur les informations

Composant Notifications

Composant de notifications de style Skeuomorphism avec effets réactifs et prise en charge du thème sombre, construit à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="flex flex-col items-center p-4">
    <!-- Notification 1 -->
    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 mb-4 w-full max-w-sm">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h4>
                <p class="text-sm text-gray-600 dark:text-gray-400">Just joined the platform.</p>
            </div>
        </div>
        <img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
    </div>
    
    <!-- Notification 2 -->
    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 mb-4 w-full max-w-sm">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h4>
                <p class="text-sm text-gray-600 dark:text-gray-400">Liked your post.</p>
            </div>
        </div>
        <img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
    </div>
    
    <!-- Notification 3 -->
    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 w-full max-w-sm">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Mark Johnson</h4>
                <p class="text-sm text-gray-600 dark:text-gray-400">Commented on your photo.</p>
            </div>
        </div>
        <img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
    </div>
</div>

Composant de notifications de style skeuomorphisme avec conception réactive et prise en charge du thème sombre. Ce composant présente un aspect réaliste et en relief pour les notifications, y compris un effet d’ombre et de lueur subtil. Il est entièrement réactif et comprend des styles distincts pour le mode sombre, assurant une lisibilité et un attrait esthétique dans toutes les conditions d’éclairage. Utilise des images d’espace réservé pour les avatars.

Ouvrir Aperçu

                <div class="p-4 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4 dark:bg-gray-800">
  <h2 class="text-xl font-bold text-gray-900 dark:text-white">Notifications</h2>

  <!-- Notification 1 -->
  <div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
    <img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://randomuser.me/api/portraits/thumb/women/68.jpg" alt="Avatar">
    <div class="flex-1">
      <p class="text-sm font-medium text-gray-900 dark:text-gray-200">New message from <span class="font-semibold">Alice</span></p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Hey, are you free to chat?</p>
    </div>
  </div>

  <!-- Notification 2 -->
  <div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
    <img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Avatar">
    <div class="flex-1">
      <p class="text-sm font-medium text-gray-900 dark:text-gray-200">You have a new follower: <span class="font-semibold">Bob</span></p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Started following you 5m ago.</p>
    </div>
  </div>

  <!-- Notification 3 -->
  <div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
    <img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://picsum.photos/id/237/80/80" alt="Event Image">
    <div class="flex-1">
      <p class="text-sm font-medium text-gray-900 dark:text-gray-200">Event Reminder: <span class="font-semibold">Team Meeting</span></p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Tomorrow at 10:00 AM.</p>
    </div>
  </div>

</div>

Composant Notifications

Un composant de notifications réactives conçu en mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg max-w-md mx-auto">
  <h2 class="text-xl font-semibold mb-4">Notifications</h2>
  <div class="space-y-4">
    <div class="flex items-start p-3 bg-gray-700 rounded">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">John Doe</p>
        <p>Just completed a new task.</p>
        <span class="text-gray-400 text-sm">10 minutes ago</span>
      </div>
    </div>
    <div class="flex items-start p-3 bg-gray-700 rounded">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">Jane Smith</p>
        <p>Commented on your post.</p>
        <span class="text-gray-400 text-sm">20 minutes ago</span>
      </div>
    </div>
    <div class="flex items-start p-3 bg-gray-700 rounded">
      <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">Michael Brown</p>
        <p>Sent you a friend request.</p>
        <span class="text-gray-400 text-sm">30 minutes ago</span>
      </div>
    </div>
    <div class="flex items-start p-3 bg-gray-700 rounded">
      <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">Emily Davis</p>
        <p>Liked your photo.</p>
        <span class="text-gray-400 text-sm">1 hour ago</span>
      </div>
    </div>
  </div>
</div>

Notifications Composante 26

Un composant de notifications minimaliste conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge du thème sombre, affichant une liste de notifications avec des avatars et des images.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto p-6">
    <h2 class="text-xl font-semibold mb-4">Notifications</h2>
    <div class="space-y-3">
        <!-- Notification Item -->
        <div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">John Doe liked your post</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Just now</p>
            </div>
            <img src="https://picsum.photos/40/40" alt="Image" class="w-10 h-10 rounded-lg ml-2">
        </div>
        
        <!-- Notification Item -->
        <div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith commented on your photo</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">5 minutes ago</p>
            </div>
            <img src="https://picsum.photos/40/41" alt="Image" class="w-10 h-10 rounded-lg ml-2">
        </div>
        
        <!-- Notification Item -->
        <div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">Mark Wilson started following you</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">10 minutes ago</p>
            </div>
            <img src="https://picsum.photos/40/42" alt="Image" class="w-10 h-10 rounded-lg ml-2">
        </div>
    </div>
</div>