<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<button class="relative text-neutral-300 cursor-pointer w-28 h-28 bg-purple-300 rounded-full flex justify-center items-center text-neutral-400 transition duration-300 shadow-lg shadow-purple-400 active:shadow-none active:translate-y-1.5">
<div class="relative -top-[1px] cursor-pointer w-24 h-24 bg-purple-300 rounded-full border-8 border-white">
<div class="w-3 h-3 bg-purple-800 rounded-full relative top-5 left-5"></div>
<div class="w-3 h-3 bg-purple-800 rounded-full relative top-2 left-12"></div>
<div class="w-3 h-3 bg-purple-800 rounded-full relative top-5 left-5"></div>
<div class="w-3 h-3 bg-purple-800 rounded-full relative top-2 left-12"></div>
</div>
</button>