Neumorphicユーザープロファイルカード - パステル

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
  <div class="w-full max-w-sm rounded-[3rem] p-8 text-center transition-all duration-300 ease-in-out
    bg-gradient-to-br from-purple-100 via-pink-100 to-rose-100
    shadow-[10px_10px_20px_#d1caca,-10px_-10px_20px_#ffffff]
    dark:from-gray-700 dark:via-gray-750 dark:to-gray-800
    dark:shadow-[10px_10px_20px_#222222,-10px_-10px_20px_#444444]">

    <div class="relative w-32 h-32 mx-auto mb-6 rounded-full
      shadow-[inset_5px_5px_10px_#b9a8bd,inset_-5px_-5px_10px_#f5e9f6]
      dark:shadow-[inset_5px_5px_10px_#333333,inset_-5px_-5px_10px_#555555]">
      <img class="w-full h-full object-cover rounded-full p-1 border-4 border-transparent
        shadow-[0px_0px_0px_2px_#ffffff,0px_0px_0px_4px_#ddcce1]
        dark:shadow-[0px_0px_0px_2px_#333,0px_0px_0px_4px_#555]"
        src="https://randomuser.me/api/portraits/women/14.jpg" alt="Profile Picture">
      <span class="absolute bottom-1 right-1 block w-4 h-4 rounded-full bg-green-400
        shadow-[0px_0px_0px_2px_#ffffff,0px_0px_0px_4px_#ddcce1]
        dark:shadow-[0px_0px_0px_2px_#333,0px_0px_0px_4px_#555]"></span>
    </div>

    <h2 class="text-2xl font-bold mb-2 text-purple-700 dark:text-purple-300">Jane Doe</h2>
    <p class="text-md text-pink-600 mb-6 dark:text-pink-300">Creative Designer & Developer</p>

    <div class="grid grid-cols-3 gap-4 mb-8">
      <div class="p-3 rounded-xl
        shadow-[inset_5px_5px_10px_#d1caca,inset_-5px_-5px_10px_#ffffff]
        dark:shadow-[inset_5px_5px_10px_#222222,inset_-5px_-5px_10px_#444444]">
        <p class="text-lg font-semibold text-rose-500 dark:text-rose-300">12</p>
        <p class="text-sm text-purple-500 dark:text-purple-200">Projects</p>
      </div>
      <div class="p-3 rounded-xl
        shadow-[inset_5px_5px_10px_#d1caca,inset_-5px_-5px_10px_#ffffff]
        dark:shadow-[inset_5px_5px_10px_#222222,inset_-5px_-5px_10px_#444444]">
        <p class="text-lg font-semibold text-rose-500 dark:text-rose-300">80</p>
        <p class="text-sm text-purple-500 dark:text-purple-200">Clients</p>
      </div>
      <div class="p-3 rounded-xl
        shadow-[inset_5px_5px_10px_#d1caca,inset_-5px_-5px_10px_#ffffff]
        dark:shadow-[inset_5px_5px_10px_#222222,inset_-5px_-5px_10px_444444]">
        <p class="text-lg font-semibold text-rose-500 dark:text-rose-300">5</p>
        <p class="text-sm text-purple-500 dark:text-purple-200">Awards</p>
      </div>
    </div>

    <div class="flex justify-center space-x-4">
      <button class="py-3 px-6 rounded-3xl font-semibold transition-all duration-300 ease-in-out
        bg-gradient-to-br from-purple-200 to-pink-200 text-purple-700
        shadow-[7px_7px_14px_#b9a8bd,-7px_-7px_14px_#ffffff]
        hover:shadow-[inset_5px_5px_10px_#b9a8bd,inset_-5px_-5px_10px_#f5e9f6]
        dark:from-gray-600 dark:to-gray-700 dark:text-purple-300
        dark:shadow-[7px_7px_14px_#222222,-7px_-7px_14px_#444444]
        dark:hover:shadow-[inset_5px_5px_10px_#333333,inset_-5px_-5px_10px_#555555]">
        View Portfolio
      </button>
      <button class="py-3 px-6 rounded-3xl font-semibold transition-all duration-300 ease-in-out
        bg-gradient-to-br from-pink-200 to-rose-200 text-pink-700
        shadow-[7px_7px_14px_#b9a8bd,-7px_-7px_14px_#ffffff]
        hover:shadow-[inset_5px_5px_10px_#b9a8bd,inset_-5px_-5px_10px_#f5e9f6]
        dark:from-gray-700 dark:to-gray-600 dark:text-pink-300
        dark:shadow-[7px_7px_14px_#222222,-7px_-7px_14px_#444444]
        dark:hover:shadow-[inset_5px_5px_10px_#333333,inset_-5px_-5px_10px_#555555]">
        Contact Me
      </button>
    </div>
  </div>
</div>