react-message-cs/dist/message.css

An message component.

.message{align-items:center;animation:slideIn .5s forwards,fadeOut .5s ease-in-out 4.5s forwards;border-radius:6px;box-shadow:2px 2px 10px rgba(0,0,0,.1);display:flex;font-size:16px;font-weight:500;gap:10px;min-width:300px;padding:12px 16px;position:fixed;right:-300px;top:20px}.message-neutral{background-color:#e0e0e0;border-left:5px solid #757575;color:#5f6368}.message-info{background-color:#d9edf7;border-left:5px solid #31708f;color:#31708f}.message-success{background-color:#d4edda;border-left:5px solid #28a745;color:#155724}.message-warning{background-color:#fff3cd;border-left:5px solid #ffc107;color:#856404}.message-error{background-color:#f8d7da;border-left:5px solid #dc3545;color:#721c24}.message-close{background:none;border:none;cursor:pointer;font-size:16px;margin-left:auto}.message-icon{font-size:18px}@keyframes slideIn{0%{right:-300px}to{right:20px}}