body {
font-family: Arial, sans-serif;
}
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
width: 150px;
height: 200px;
margin: 10px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 20px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

Create auto color palette generated cards animation in vue 3

const app = Vue.createApp({
data() {
return {
colors: []
};
},
mounted() {
this.generateColors();
setInterval(this.generateColors, 3000);
},
methods: {
generateColors() {
this.colors = [];
for (let i = 0; i < 9; i++) {
this.colors.push(this.getRandomColor());
}
},
getRandomColor() {
let letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
}
});

app.mount('#app');