Professional Chips - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Professional Chips</title> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f9; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .chips-container { display: flex; flex-wrap: wrap; gap: 10px; } .chip { display: flex; align-items: center; background-color: #ffffff; border: 2px solid #e0e0e0; border-radius: 25px; padding: 10px 15px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s, background-color 0.3s; cursor: pointer; position: relative; overflow: hidden; } .chip:hover { background-color: #ffeb3b; transform: scale(1.1); } .chip i { margin-right: 10px; font-size: 20px; transition: transform 0.3s; } .chip:hover i { transform: rotate(20deg); } .chip span { font-size: 16px; font-weight: bold; color: #333; } .chip .close { margin-left: 10px; font-size: 18px; color: #ff5252; cursor: pointer; transition: transform 0.3s; } .chip .close:hover { transform: scale(1.5); } @keyframes slideIn { 0% { transform: translateX(100%); } 100% { transform: translateX(0); } } @keyframes popIn { 0% { transform: scale(0); } 100% { transform: scale(1); } } .chip { animation: slideIn 0.5s ease-out, popIn 0.5s ease-out; } </style> </head> <body> <div class="chips-container"> <div class="chip"> <i class="fas fa-user"></i> <span>Profile</span> <span class="close">×</span> </div> <div class="chip"> <i class="fas fa-envelope"></i> <span>Messages</span> <span class="close">×</span> </div> <div class="chip"> <i class="fas fa-bell"></i> <span>Notifications</span> <span class="close">×</span> </div> <div class="chip"> <i class="fas fa-cog"></i> <span>Settings</span> <span class="close">×</span> </div> </div> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <script> document.querySelectorAll('.chip .close').forEach(closeBtn => { closeBtn.addEventListener('click', function() { const chip = this.parentElement; chip.style.transform = 'scale(0)'; setTimeout(() => chip.remove(), 300); }); }); </script> </body> </html>