JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<div id="feedback"></div>
<button onclick="showFeedback('success', 'Data imported successfully!')">Show Success</button>
<button onclick="showFeedback('error', 'Invalid JSON format')">Show Error</button>

CSS

#feedback {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    margin: 15px;
    opacity: 0; /* Start with hidden text */
    transition: opacity 0.5s ease-in-out; /* Smooth transition for opacity */
}
.show-feedback {
    opacity: 1; /* Show text */
    animation: fadeInOut 2.5s ease-in-out;
}
@keyframes fadeInOut {
    0% { opacity: 0; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(0.9); }
}
.success {
    color: green;
    border: 2px solid green;
    background-color: #e0f7e0;
}
.error {
    color: red;
    border: 2px solid red;
    background-color: #f7e0e0;
}

JavaScript

function showFeedback(type, message) {
    const feedbackDiv = document.getElementById('feedback');
    feedbackDiv.classList.remove('success', 'error');
    feedbackDiv.textContent = message;
    feedbackDiv.classList.add(type);
    feedbackDiv.classList.add('show-feedback');
    setTimeout(() => {
        feedbackDiv.classList.remove('show-feedback');
    }, 2500);
}