Li todos os tópicos do fórum e não resolveu. Esse é meu código:
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme:{
extend:{
colors:{
azul:{
claro: '#C5DFFF',
escuro: '#061E3C',
hover:'#1057B0',
},
},
fontFamily:{
inter: ['Inter', 'sans-serif'],
},
Keyframes:{
sino_kf:{
'0%, 100%': {
transform: 'rotate(-10deg)'
},
'50%':{
transform:'rotate(10deg)'
}
}
},
animation: {
sino:'sino_kf 0.31s ease-in-out infinite'
}
}
}
}
</script>
<div class="self-center relative group ">
<svg class="fill-azul-escuro absolute top-0 left-1 opacity-0 group-hover:opacity-100 group-hover:animate-ping"
</svg>
<svg class="w-12 h-12 fill-azul-claro stroke-azul-escuro group-hover:animate-sino" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
</svg>
</div>