Tailwind CSS Notification

<div class="space-y-5">
  <div class="relative mx-auto max-w-[400px] rounded-xl border border-secondary-50 bg-white p-4 text-sm shadow-lg">
    <button class="absolute top-4 right-4 ml-auto text-secondary-500 hover:text-secondary-900">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
        <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
      </svg>
    </button>
    <div class="flex space-x-4">
      <div class="flex-1">
        <h4 class="pr-6 font-medium text-secondary-900">Updates have been made to your profile</h4>
        <div class="mt-1 text-secondary-500">Your team has made changes to your company profile since you last logged in.</div>
        <div class="mt-2 flex space-x-4">
          <button class="inline-block font-medium leading-loose text-secondary-500 hover:text-secondary-900">Dismiss</button>
          <button class="inline-block font-medium leading-loose text-primary-600 hover:text-primary-700">View more</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="space-y-5">
  <div class="relative mx-auto max-w-[400px] rounded-xl border border-secondary-50 bg-white p-4 text-sm shadow-lg">
    <button class="ttop-4 absolute right-4 ml-auto text-secondary-500 hover:text-secondary-900">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
        <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
      </svg>
    </button>
    <div class="flex space-x-4">
      <div class="flex h-10 w-10 items-center justify-center rounded-full bg-green-100 text-green-500">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-6 w-6">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="flex-1">
        <h4 class="pr-6 font-medium text-secondary-900">Updates have been made to your profile</h4>
        <div class="mt-1 text-secondary-500">Your team has made changes to your company profile since you last logged in.</div>
        <div class="mt-2 flex space-x-4">
          <button class="inline-block font-medium leading-loose text-secondary-500 hover:text-secondary-900">Dismiss</button>
          <button class="inline-block font-medium leading-loose text-primary-600 hover:text-primary-700">View more</button>
        </div>
      </div>
    </div>
  </div>
  <div class="relative mx-auto max-w-[400px] rounded-xl border border-secondary-50 bg-white p-4 text-sm shadow-lg">
    <button class="ttop-4 absolute right-4 ml-auto text-secondary-500 hover:text-secondary-900">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
        <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
      </svg>
    </button>
    <div class="flex space-x-4">
      <div class="flex h-10 w-10 items-center justify-center rounded-full bg-yellow-100 text-yellow-500">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-6 w-6">
          <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="flex-1">
        <h4 class="pr-6 font-medium text-secondary-900">Warning</h4>
        <div class="mt-1 text-secondary-500">Your team has made changes to your company profile since you last logged in.</div>
        <div class="mt-2 flex space-x-4">
          <button class="inline-block font-medium leading-loose text-secondary-500 hover:text-secondary-900">Dismiss</button>
          <button class="inline-block font-medium leading-loose text-primary-600 hover:text-primary-700">View more</button>
        </div>
      </div>
    </div>
  </div>
  <div class="relative mx-auto max-w-[400px] rounded-xl border border-secondary-50 bg-white p-4 text-sm shadow-lg">
    <button class="ttop-4 absolute right-4 ml-auto text-secondary-500 hover:text-secondary-900">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
        <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
      </svg>
    </button>
    <div class="flex space-x-4">
      <div class="flex h-10 w-10 items-center justify-center rounded-full bg-red-100 text-red-500">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-6 w-6">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="flex-1">
        <h4 class="pr-6 font-medium text-secondary-900">Error</h4>
        <div class="mt-1 text-secondary-500">Your team has made changes to your company profile since you last logged in.</div>
        <div class="mt-2 flex space-x-4">
          <button class="inline-block font-medium leading-loose text-secondary-500 hover:text-secondary-900">Dismiss</button>
          <button class="inline-block font-medium leading-loose text-primary-600 hover:text-primary-700">View more</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="space-y-5">
  <div class="relative mx-auto max-w-[400px] overflow-hidden rounded-xl border border-secondary-50 bg-white text-sm shadow-lg">
    <button class="absolute top-4 right-4 ml-auto text-secondary-500 hover:text-secondary-900">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
        <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
      </svg>
    </button>
    <div class="flex">
      <img class="h-auto w-24 object-cover" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
      <div class="flex-1 p-4">
        <h4 class="pr-6 font-medium text-secondary-900">Updates have been made to your profile</h4>
        <div class="mt-1 text-secondary-500">Your team has made changes to your company profile since you last logged in.</div>
        <div class="mt-2 flex space-x-4">
          <button class="inline-block font-medium leading-loose text-secondary-500 hover:text-secondary-900">Dismiss</button>
          <button class="inline-block font-medium leading-loose text-primary-600 hover:text-primary-700">View more</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="space-y-5">
  <div class="relative mx-auto max-w-[400px] rounded-md border border-secondary-50 bg-white p-4 text-sm shadow-lg">
    <button class="ttop-4 absolute right-4 ml-auto text-secondary-500 hover:text-secondary-900">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
        <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
      </svg>
    </button>
    <div class="flex space-x-4">
      <div class="relative h-10 w-10">
        <img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1645378999013-95abebf5f3c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
        <span class="absolute right-0 bottom-0 h-2.5 w-2.5 rounded-full bg-green-400 ring ring-white"></span>
      </div>
      <div class="flex-1">
        <h4 class="pr-6 font-medium text-secondary-900">Taylor Swift <span class="ml-2 font-normal text-secondary-500">5 min ago</span></h4>
        <div class="mt-1 text-secondary-500">Your team has made changes to your company profile since you last logged in.</div>
        <div class="mt-2 flex space-x-4">
          <button class="inline-block font-medium leading-loose text-secondary-500 hover:text-secondary-900">Dismiss</button>
          <button class="inline-block font-medium leading-loose text-primary-600 hover:text-primary-700">View more</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="space-y-5">
  <div class="relative mx-auto max-w-[400px] rounded-xl border border-secondary-50 bg-white p-4 text-sm shadow-lg">
    <button class="ttop-4 absolute right-4 ml-auto text-secondary-500 hover:text-secondary-900">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
        <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
      </svg>
    </button>
    <div class="flex space-x-4">
      <div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100 text-primary-500">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6">
          <path fill-rule="evenodd" d="M10.5 3.75a6 6 0 00-5.98 6.496A5.25 5.25 0 006.75 20.25H18a4.5 4.5 0 002.206-8.423 3.75 3.75 0 00-4.133-4.303A6.001 6.001 0 0010.5 3.75zm2.03 5.47a.75.75 0 00-1.06 0l-3 3a.75.75 0 101.06 1.06l1.72-1.72v4.94a.75.75 0 001.5 0v-4.94l1.72 1.72a.75.75 0 101.06-1.06l-3-3z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="flex-1">
        <h4 class="pr-6 font-medium text-secondary-900">Uploading 'sailboatui.png'</h4>
        <div class="mt-1 text-secondary-500">The file is being uploaded.</div>
        <div class="mt-3 space-y-1">
          <div class="relative flex h-2 w-full overflow-hidden rounded-full bg-secondary-200">
            <div role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width: 35%" class="flex h-full items-center justify-center bg-primary-500 text-xs text-white"></div>
          </div>
          <dl class="flex items-center justify-end">
            <dd class="text-secondary-500">35%</dd>
          </dl>
        </div>
        <div class="mt-2 flex space-x-4">
          <button class="inline-block font-medium leading-loose text-secondary-500 hover:text-secondary-900">Cancel</button>
          <button class="inline-block font-medium leading-loose text-primary-600 hover:text-primary-700">Upload another</button>
        </div>
      </div>
    </div>
  </div>
</div>