JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<div class='content-holder'>
    <div class="card adobe">1</div>
    <div class="card gryphon">2</div>
    <div class="card neu">3</div>
    <div class="card incluvie">4</div>
    <div class="card collegepond">5</div>
  </div>

CSS

.content-holder {
  display: flex;
  gap: 10px;
}

.card {
  background-color: #fff;
  height: 100px;
  width: 100px;
  flex: 1;
  border-radius: 3px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid black;
}

.card:hover {
  flex: 3;
}

.adobe {
  background-color: #FE0000;  
}

.gryphon {
  background-color: #004C6D;  
}

.neu {
  background-color: #CC0000;  
}

.incluvie {
  background-color: #000000;  
}

.collegepond {
  background-color: #53DFFE;  
}

JavaScript

/* document.addEventListener('DOMContentLoaded', function() {
    var cards = document.querySelectorAll('.card');

    // Add event listeners to each card
    cards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            var cardClass = this.classList.contains('adobe') ? '#FE0000' :
                            this.classList.contains('gryphon') ? '#004C6D' :
                            this.classList.contains('neu') ? '#CC0000' :
                            this.classList.contains('incluvie') ? '#000000' :
                            this.classList.contains('collegepond') ? '#53DFFE' : 'white';
            
            this.style.backgroundColor = cardClass;
            setColor(cardClass);
        });

        card.addEventListener('mouseleave', function() {
            this.style.backgroundColor = '#fff';
            setColor('transparent'); // Reset to default or any other preferred color
        });
    });
});
 */