JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup Stacking Effect</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 h-screen">
<div id="popup-container" class="fixed top-10 right-10 space-y-2"></div>
<button onclick="addPopup('https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg', 'Some text')" class="fixed bottom-10 right-10 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Add Popup
</button>


</body>
</html>

CSS

#popup-container {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 300px;
}

.popup {
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  opacity: 0;
  transform: translateX(100%);
  transition: transform 1s ease-out, opacity 1s ease-out;
}

JavaScript

const popupData = [
    {
        "icon": "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg",
        "text": "This is the first popup message. qwe qwe qwe qwe qweq eqwe qweqwe qwe"
    },
    {
        "icon": "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg",
        "text": "Here is another informative popup. qwe qweq eqwe qw e"
    }
];

function loadPopups() {
    popupData.forEach((popup) => { 
        addPopup(popup.icon, popup.text);
    });
}

function addPopup(icon, text) {
    const container = document.getElementById('popup-container');

    // Apply transition to existing popups
    const existingPopups = container.querySelectorAll('.popup');
    existingPopups.forEach(popup => {
        popup.style.transition = 'transform 0.2s ease-out, opacity 0.2s ease-out';
        popup.style.transform = 'translateY(10px)';
    });

    const newPopup = document.createElement('div');
    newPopup.classList.add('bg-white', 'p-4', 'border', 'border-gray-300', 'shadow-lg', 'mt-2', 'flex', 'items-center', 'transform', 'transition-all', 'opacity-0', 'translate-x-full', 'popup');

    // Create and append the SVG element
    const svgElement = document.createElement('img');
    svgElement.src = icon;
    svgElement.classList.add('h-6', 'w-6', 'mr-4');

    // Create and append the text element
    const textElement = document.createElement('span');
    textElement.textContent = text;
    textElement.classList.add('flex-grow');

    newPopup.appendChild(svgElement);
    newPopup.appendChild(textElement);

    container.insertBefore(newPopup, container.firstChild);

    // Animate the new popup coming in from the right
    setTimeout(() => {
        newPopup.style.opacity = '1';
        newPopup.style.transform = 'translateX(0)';
        newPopup.style.transition = 'transform 0.2s ease-out, opacity 0.2s ease-out';
    }, 100);

    // Set timeout to remove the popup after 5 seconds
    setTimeout(() => {
        newPopup.style.opacity = '0';
 ...