Elegant Notification Toast with Tailwind CSS

Generate-a-code-snippet-for-a-premium,-material-design-inspired-notification-toast-component-using-Tailwind-CSS.-The-toast-should-look-elegant-with-a-soft,-rounded-design,-subtle-drop-shadows,-and-have-both-success-and-error-states.-Each-message-should-appear-with-a-soft-slide-in-effect-from-the-top-right-corner,-feature-an-icon-for-context-(e.g.,-checkmark-for-success,-exclamation-for-error),-and-should-automatically-fade-out-after-4-seconds.-The-background-for-success-should-be-a-gentle-green-gradient,-and-for-error,-a-light-red-gradient,-with-a-contrasting-text-color-for-readability.-The-component-should-include-Tailwind-utility-classes-to-achieve-the-design,-and-JavaScript-for-handling-the-fade-out-effect.-Use-only-vanilla-JavaScript-for-the-auto-hide-behavior.