Notification Alert Section

Notification card with close button

This tailwind example is contributed by Prashant, on 11-Oct-2022. Component is made with Tailwind v3.4. similar terms for this example are caution,Toast, Snackbar

Alert Notification

Author Prashant

Tailwind v3.4 13.9k 13

Fork Fullscreen

<div class='flex flex-col gap-3'>
    <div class="relative border border-gray-200 rounded-lg shadow-lg">
      <button onClick='return this.parentNode.remove()'
        class="absolute p-1 bg-gray-100 border border-gray-300 rounded-full -top-1 -right-1"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-3 h-3"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            fill-rule="evenodd"
            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
            clip-rule="evenodd"
          />
        </svg>
      </button>
    
      <div class="flex items-center p-4">
        <img
          class="object-cover w-12 h-12 rounded-lg"
          src="https://randomuser.me/api/portraits/women/71.jpg"
          alt=""
        />
    
        <div class="ml-3 overflow-hidden">
          <p class="font-medium text-gray-900">Jan Doe</p>
          <p class="max-w-xs text-sm text-gray-500 truncate">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet,
            laborum?
          </p>
        </div>
      </div>
    </div>
    <div class="relative border border-gray-200 rounded-lg shadow-lg">
      <button onClick='return this.parentNode.remove()'
        class="absolute p-1 bg-gray-100 border border-gray-300 rounded-full -top-1 -right-1"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-3 h-3"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            fill-rule="evenodd"
            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
            clip-rule="evenodd"
          />
        </svg>
      </button>
    
      <div class="flex items-center p-4">
        <img
          class="object-cover w-12 h-12 rounded-lg"
          src="https://randomuser.me/api/portraits/men/71.jpg"
          alt=""
        />
    
        <div class="ml-3 overflow-hidden">
          <p class="font-medium text-gray-900">John Doe</p>
          <p class="max-w-xs text-sm text-gray-500 truncate">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet,
            laborum?
          </p>
        </div>
      </div>
    </div>
    <div class="relative border border-gray-200 rounded-lg shadow-lg">
      <button onClick='return this.parentNode.remove()'
        class="absolute p-1 bg-gray-100 border border-gray-300 rounded-full -top-1 -right-1"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-3 h-3"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            fill-rule="evenodd"
            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
            clip-rule="evenodd"
          />
        </svg>
      </button>
    
      <div class="flex items-center p-4">
        <img
          class="object-cover w-12 h-12 rounded-lg"
          src="https://randomuser.me/api/portraits/men/5.jpg"
          alt=""
        />
    
        <div class="ml-3 overflow-hidden">
          <p class="font-medium text-gray-900">Mike Doe</p>
          <p class="max-w-xs text-sm text-gray-500 truncate">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet,
            laborum?
          </p>
        </div>
      </div>
    </div>

</div>