JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.0/feather.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<div id="popup" class="fixed bottom-4 right-4 bg-white rounded-lg shadow-lg p-4 w-64 transition-all duration-300">
    <button id="closeBtn" class="absolute -top-1 -right-1 p-1 rounded-full hover:bg-gray-100 transition-colors duration-200 bg-white shadow-md">
      <i data-feather="x" class="w-4 h-4 text-gray-500 hover:text-gray-700"></i>
    </button>
    
    <h3 class="text-sm font-semibold mb-2">Welcome!</h3>
    <p class="text-xs text-gray-600">This is a sample popup message. Click X to close.</p>
  </div>

CSS

.slide-out {
      animation: slideRight 0.5s ease-in-out forwards;
    }
    
    @keyframes slideRight {
      from {
        transform: translateX(0);
        opacity: 1;
      }
      to {
        transform: translateX(100%);
        opacity: 0;
      }
    }

    body {
      margin: 0;
      min-height: 100vh;
    }

JavaScript

feather.replace();

    const popup = document.getElementById('popup');
    const closeBtn = document.getElementById('closeBtn');

    closeBtn.addEventListener('click', () => {
      popup.classList.add('slide-out');
      
      popup.addEventListener('animationend', () => {
        popup.remove();
      });
    });