Neumorphe Benutzerprofilkarte

<div class="p-4 sm:p-6 bg-stone-100 dark:bg-stone-800 min-h-screen flex items-center justify-center font-sans">

  <div class="w-full max-w-sm mx-auto p-6 rounded-3xl
    bg-stone-200 shadow-custom-light
    dark:bg-stone-700 dark:shadow-custom-dark
    transition-all duration-300 ease-in-out
    border border-stone-300 dark:border-stone-600">

    <div class="flex flex-col items-center text-center">
      <div class="relative mb-6">
        <img class="w-32 h-32 rounded-full object-cover
          shadow-custom-light-inset dark:shadow-custom-dark-inset
          border-4 border-stone-200 dark:border-stone-700" src="https://randomuser.me/api/portraits/men/52.jpg" alt="User Avatar">
      </div>

      <h2 class="text-2xl font-semibold text-stone-700 dark:text-stone-200 mb-2
        transition-colors duration-300">John Doe</h2>
      <p class="text-md text-stone-500 dark:text-stone-400 mb-4
        transition-colors duration-300">Software Engineer</p>

      <div class="w-full mb-6">
        <button class="w-full py-3 px-6 rounded-xl
          bg-stone-300 text-stone-700 font-medium
          shadow-custom-light-button
          hover:shadow-custom-light-button-hover
          active:shadow-custom-light-button-pressed
          dark:bg-stone-600 dark:text-stone-200
          dark:shadow-custom-dark-button
          dark:hover:shadow-custom-dark-button-hover
          dark:active:shadow-custom-dark-button-pressed
          transition-all duration-200 ease-in-out
          focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50
          text-base sm:text-lg">
          View Profile
        </button>
      </div>

      <div class="flex justify-center space-x-4 w-full">
        <button class="p-3 rounded-xl
          text-stone-600 dark:text-stone-300
          bg-stone-300 shadow-custom-light-button
          hover:shadow-custom-light-button-hover
          active:shadow-custom-light-button-pressed
          dark:bg-stone-600 dark:shadow-custom-dark-button
          dark:hover:shadow-custom-dark-button-hover
          dark:active:shadow-custom-dark-button-pressed
          transition-all duration-200 ease-in-out
          focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
          </svg>
          <span class="sr-only">Email</span>
        </button>

        <button class="p-3 rounded-xl
          text-stone-600 dark:text-stone-300
          bg-stone-300 shadow-custom-light-button
          hover:shadow-custom-light-button-hover
          active:shadow-custom-light-button-pressed
          dark:bg-stone-600 dark:shadow-custom-dark-button
          dark:hover:shadow-custom-dark-button-hover
          dark:active:shadow-custom-dark-button-pressed
          transition-all duration-200 ease-in-out
          focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
          </svg>
          <span class="sr-only">Portfolio</span>
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Custom Styles for Neumorphism - Add this to your main CSS file or a <style> tag if not using PostCSS for custom utilities -->
<style>
  .shadow-custom-light {
    box-shadow: 7px 7px 14px #b8b8b8, -7px -7px 14px #ffffff;
  }
  .dark .shadow-custom-dark {
    box-shadow: 7px 7px 14px #3d3b38, -7px -7px 14px #575550;
  }

  .shadow-custom-light-inset {
    box-shadow: inset 5px 5px 10px #b8b8b8, inset -5px -5px 10px #ffffff;
  }
  .dark .shadow-custom-dark-inset {
    box-shadow: inset 5px 5px 10px #3d3b38, inset -5px -5px 10px #575550;
  }

  /* Buttons */
  .shadow-custom-light-button {
    box-shadow: 5px 5px 10px #b8b8b8, -5px -5px 10px #ffffff;
  }
  .hover\:shadow-custom-light-button-hover:hover {
    box-shadow: 3px 3px 6px #b8b8b8, -3px -3px 6px #ffffff;
  }
  .active\:shadow-custom-light-button-pressed:active {
    box-shadow: inset 3px 3px 6px #b8b8b8, inset -3px -3px 6px #ffffff;
  }

  .dark .shadow-custom-dark-button {
    box-shadow: 5px 5px 10px #3d3b38, -5px -5px 10px #575550;
  }
  .dark .hover\:shadow-custom-dark-button-hover:hover {
    box-shadow: 3px 3px 6px #3d3b38, -3px -3px 6px #575550;
  }
  .dark .active\:shadow-custom-dark-button-pressed:active {
    box-shadow: inset 3px 3px 6px #3d3b38, inset -3px -3px 6px #575550;
  }
</style>