Hi, I'm try to make a avatar card with animation by tailwindcss v3. It's amazing to made it share the with you check out below 👇

<div class="flex items-center justify-center h-screen">
  <!-- start the avatar -->
  <div id="box" class="relative w-60 h-60 bg-sky-100 rounded-full overflow-hidden
    before:content-[''] before:absolute before:bg-gradient-to-r before:from-transparent before:to-cyan-500 before:-inset-y-4 before:inset-x-20 before:transition-[0.5s]
    hover:before:-inset-y-5 hover:before:inset-x-0 before:animate-[spin_3s_linear_infinite]
    after:content-[''] after:absolute after:inset-3 after:rounded-full after:z-10
    ">
    <div id="content" class="
    absolute inset-2 border-4 border-gray-50 z-30 rounded-full overflow-hidden flex justify-center items-center flex-col
    ">
      <img src="https://userstock.io/data/wp-content/uploads/2020/06/jack-finnigan-rriAI0nhcbc-1024x1024.jpg" alt="" class="
      object-cover absolute t-0 l-0 w-full h-full transition-[0.5s] z-30
      hover:opacity-40
      ">
      <h2 class="
      relative text-2xl text-center font-extrabold text-black uppercase
      ">Rog Mog <br><span>UI/UX</span></h2>
    </div>
  </div>
  <!-- end the avatar -->
</div>

you also find the preview on tailwindplay.