```html
<div class='flex items-center justify-center p-48 '>
<div class=" group relative flex h-10 w-16">
<span class="group-hover:animate-ping-slow inline-flex absolute h-full w-full bg-sky-400 opacity-75 pointer-events-none rounded z-[-1]"></span>
<button class="h-10 w-16 bg-sky-500 rounded" onclick="alert('test') ">
text
<button>
</div>
</div>
```
```ts
/** @type {import('tailwindcss').Config} */
export default {
theme: {
extend: {
animation: {
'ping-slow': 'ping 3s cubic-bezier(0, 0, 0.1, 1) infinite',
}
},
},
plugins: [],
}
```
you can copy this to tailwind play
#software-engineering/css/tailwind