Alle Komponenten

                <div class="relative isolate overflow-hidden bg-gradient-to-br from-gray-900 to-black py-16 sm:py-24 lg:py-32">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto max-w-2xl lg:mx-0">
      <h2 class="text-4xl font-bold tracking-tight text-white sm:text-6xl">Interactive Media</h2>
      <p class="mt-6 text-lg leading-8 text-gray-300">Experience media in a new dimension with our captivating 3D design.</p>
    </div>
    <div class="mx-auto mt-10 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-14 lg:mx-0 lg:max-w-none lg:grid-cols-3">
      <article class="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-gray-800 px-8 pb-8 pt-80 sm:pt-48 lg:pt-80 transform transition-transform duration-500 ease-in-out hover:scale-105 hover:shadow-2xl">
        <img src="https://picsum.photos/seed/media1/500/300" alt="Placeholder image for media content 1" class="absolute inset-0 -z-10 h-full w-full object-cover">
        <div class="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40"></div>
        <div class="absolute inset-0 -z-10 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>

        <div class="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm leading-6 text-gray-300">
          <time datetime="2023-01-23" class="-m-1.5">
            <div class="flex items-center gap-x-4">
                <img class="h-10 w-10 rounded-full bg-gray-50" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
                <div class="text-sm leading-6">
                  <p class="font-semibold text-gray-300">
                    <a href="#">
                      <span class="absolute inset-0"></span>
                      John Doe
                    </a>
                  </p>
                  <p class="text-gray-400">Co-Founder / CTO</p>
                </div>
              </div>
          </time>
        </div>
        <h3 class="mt-3 text-lg font-semibold leading-6 text-white">
          <a href="#">
            <span class="absolute inset-0"></span>
            Exploring the Depths
          </a>
        </h3>
      </article>

      <article class="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-gray-800 px-8 pb-8 pt-80 sm:pt-48 lg:pt-80 transform transition-transform duration-500 ease-in-out hover:scale-105 hover:shadow-2xl">
        <img src="https://picsum.photos/seed/media2/500/300" alt="Placeholder image for media content 2" class="absolute inset-0 -z-10 h-full w-full object-cover">
        <div class="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40"></div>
        <div class="absolute inset-0 -z-10 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>

        <div class="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm leading-6 text-gray-300">
          <time datetime="2023-01-23" class="-m-1.5">
              <div class="flex items-center gap-x-4">
                  <img class="h-10 w-10 rounded-full bg-gray-50" src="https://randomuser.me/api/portraits/women/1.jpg" alt="">
                  <div class="text-sm leading-6">
                    <p class="font-semibold text-gray-300">
                      <a href="#">
                        <span class="absolute inset-0"></span>
                        Jane Smith
                      </a>
                    </p>
                    <p class="text-gray-400">Lead Designer</p>
                  </div>
                </div>
            </time>
        </div>
        <h3 class="mt-3 text-lg font-semibold leading-6 text-white">
          <a href="#">
            <span class="absolute inset-0"></span>
            The Future of Interaction
          </a>
        </h3>
      </article>

      <article class="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-gray-800 px-8 pb-8 pt-80 sm:pt-48 lg:pt-80 transform transition-transform duration-500 ease-in-out hover:scale-105 hover:shadow-2xl">
        <img src="https://picsum.photos/seed/media3/500/300" alt="Placeholder image for media content 3" class="absolute inset-0 -z-10 h-full w-full object-cover">
        <div class="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40"></div>
        <div class="absolute inset-0 -z-10 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>

        <div class="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm leading-6 text-gray-300">
          <time datetime="2023-01-23" class="-m-1.5">
              <div class="flex items-center gap-x-4">
                  <img class="h-10 w-10 rounded-full bg-gray-50" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
                  <div class="text-sm leading-6">
                    <p class="font-semibold text-gray-300">
                      <a href="#">
                        <span class="absolute inset-0"></span>
                        Peter Jones
                      </a>
                    </p>
                    <p class="text-gray-400">Marketing Manager</p>
                  </div>
                </div>
            </time>
        </div>
        <h3 class="mt-3 text-lg font-semibold leading-6 text-white">
          <a href="#">
            <span class="absolute inset-0"></span>
            Bringing Ideas to Life
          </a>
        </h3>
      </article>
    </div>
  </div>
</div>
              

                <div class="max-w-xs mx-auto bg-white border border-gray-300 rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:border-gray-700">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=1" alt="Nostalgic Image">
    <div class="p-4">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/11.jpg" alt="Avatar">
            <div class="ml-3">
                <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Retro Nostalgia</h2>
                <p class="text-gray-600 dark:text-gray-400">Explore the vibrant designs of the 80s and 90s that inspired our modern aesthetics.</p>
            </div>
        </div>
        <div class="mt-4">
            <h3 class="text-md font-semibold text-gray-700 dark:text-gray-300">Join the Movement</h3>
            <p class="text-gray-500 dark:text-gray-400">Be part of our journey as we explore retro designs, culture, and style.
            </p>
        </div>
        <div class="flex justify-between mt-4">
            <span class="text-gray-600 dark:text-gray-400">#Retro #Vintage</span>
            <button class="bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Learn More</button>
        </div>
    </div>
</div>
              

                <nav class="bg-white dark:bg-gray-900 shadow-md">
  <div class="container mx-auto px-6 py-3">
    <div class="flex justify-between items-center">
      <a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">Logo</a>
      <div class="hidden lg:flex lg:items-center">
        <a href="#" class="text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-3 py-2">Home</a>
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-3 py-2 focus:outline-none">Products</button>
          <div class="absolute left-0 mt-0 w-64 bg-white dark:bg-gray-800 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Product 1</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Product 2</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Product 3</a>
          </div>
        </div>
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-3 py-2 focus:outline-none">Services</button>
          <div class="absolute left-0 mt-0 w-64 bg-white dark:bg-gray-800 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Service 1</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Service 2</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Service 3</a>
          </div>
        </div>
        <a href="#" class="text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-3 py-2">Contact</a>
      </div>
      <button class="lg:hidden text-gray-800 dark:text-white focus:outline-none">
        <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="M4 6h16M4 12h16m-4 6h4"></path>
        </svg>
      </button>
    </div>
    <div class="lg:hidden mt-3">
      <a href="#" class="block text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-2 py-1">Home</a>
      <a href="#" class="block text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-2 py-1">Products</a>
      <a href="#" class="block text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-2 py-1">Services</a>
      <a href="#" class="block text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-2 py-1">Contact</a>
    </div>
  </div>
</nav>
              

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-200 via-gray-400 to-gray-600 dark:from-gray-800 dark:via-gray-900 dark:to-black p-4">
  <div class="relative w-full max-w-md bg-white dark:bg-gray-700 rounded-lg shadow-xl p-8">
    <div class="absolute top-0 left-0 w-full h-full border-4 border-black dark:border-gray-500 rounded-lg pointer-events-none"></div>
    <div class="relative z-10">
      <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-6 font-mono">Authenticate</h2>
      <div class="space-y-6">
        <div>
          <label for="code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 font-mono">Enter 2FA Code</label>
          <div class="mt-1">
            <input type="text" name="code" id="code" class="block w-full px-4 py-3 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-600 dark:border-gray-500 dark:text-white dark:focus:border-indigo-600 dark:focus:ring-indigo-600 font-mono tracking-widest" placeholder="••••••">
          </div>
        </div>

        <div>
          <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-indigo-700 dark:hover:bg-indigo-800 dark:focus:ring-indigo-600 font-mono">
            Verify Code
          </button>
        </div>
      </div>
      <div class="mt-6 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-400 font-mono">
          Need help? <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-500 dark:hover:text-indigo-400">Resend Code</a>
        </p>
      </div>
    </div>
  </div>
</div>
              

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg">
  <div class="relative" style="padding-top: 56.25%;">
    <img src="https://picsum.photos/600/400" alt="360 degree view" class="absolute top-0 left-0 w-full h-full object-cover rounded-lg">
    <div class="absolute inset-0 flex items-center justify-center">
      <div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-2 px-4 rounded-full text-sm font-bold">
        Retro 360° Viewer
      </div>
    </div>
  </div>
  <div class="flex justify-center space-x-4 mt-4">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full text-xs">
      &lt; Previous
    </button>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full text-xs">
      Next &gt;
    </button>
  </div>
</div>
              

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-8 w-full max-w-sm">
        <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">Welcome Back!</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Please login to your account</p>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" name="email" class="w-full p-2 border rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" name="password" class="w-full p-2 border rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400" required>
            </div>
            <button type="submit" class="w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 transition duration-150">Login</button>
        </form>
        <p class="mt-4 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sign up</a></p>
    </div>
 </div>

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-8 w-full max-w-sm mt-8">
        <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">Create Account</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Join us today</p>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="username">Username</label>
                <input type="text" id="username" name="username" class="w-full p-2 border rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" name="email" class="w-full p-2 border rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" name="password" class="w-full p-2 border rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400" required>
            </div>
            <button type="submit" class="w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 transition duration-150">Sign Up</button>
        </form>
        <p class="mt-4 text-center text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Login</a></p>
    </div>
</div>

              

                <div class="flex justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 backdrop-blur-lg bg-opacity-30 border border-gray-300 dark:border-gray-700 rounded-xl shadow-lg p-8 w-96">
        <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200 mb-6">Login with</h2>
        <div class="flex flex-col">
            <a href="#" class="flex items-center justify-center mb-4 p-3 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-300">
                <img src="https://picsum.photos/30?random=1" alt="Google" class="h-8 w-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Google</span>
            </a>
            <a href="#" class="flex items-center justify-center mb-4 p-3 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-300">
                <img src="https://picsum.photos/30?random=2" alt="Facebook" class="h-8 w-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Facebook</span>
            </a>
            <a href="#" class="flex items-center justify-center mb-4 p-3 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-300">
                <img src="https://picsum.photos/30?random=3" alt="Twitter" class="h-8 w-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Twitter</span>
            </a>
        </div>
        <div class="flex items-center justify-center mt-6">
            <span class="h-px w-full bg-gray-300 dark:bg-gray-600"></span>
            <span class="mx-2 text-gray-600 dark:text-gray-400">or</span>
            <span class="h-px w-full bg-gray-300 dark:bg-gray-600"></span>
        </div>
        <div class="mt-6">
            <input type="email" placeholder="Email" class="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 transition duration-300 mb-4">
            <input type="password" placeholder="Password" class="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 transition duration-300 mb-4">
            <button class="w-full p-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-300">Login</button>
        </div>
        <div class="text-center mt-4">
            <a href="#" class="text-blue-500 hover:underline transition duration-300">Forgot Password?</a>
        </div>
    </div>
</div>
              

                <div class="flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <img class="mb-4 rounded-full border-4 border-black dark:border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" width="100" height="100">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-2">Follow Us</h2>
    <p class="text-gray-700 dark:text-gray-300 text-center mb-4">Join our community and stay updated with our latest content!</p>
    <a href="#" class="px-4 py-2 text-lg font-bold text-white bg-black dark:bg-white dark:text-black border-4 border-black dark:border-white hover:bg-gray-600 dark:hover:bg-gray-300 transition-all duration-300">Follow</a>
</div>
              

                <div class="max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="flex items-center p-4">
        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <div>
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h2>
            <p class="text-gray-600 dark:text-gray-400">Your action was completed successfully. Thank you for your participation!</p>
        </div>
    </div>
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
        <img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Success Image">
    </div>
    <div class="p-4">
        <button class="w-full bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring focus:ring-green-300 dark:focus:ring-green-600">Okay</button>
    </div>
</div>
              

                <div class="container mx-auto p-4 bg-gray-200 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark rounded-lg">
  <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Site Map</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h3 class="font-semibold text-gray-700 dark:text-gray-200">Section 1</h3>
      <ul class="mt-2 space-y-2 text-gray-600 dark:text-gray-300">
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link 1</a></li>
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link 2</a></li>
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h3 class="font-semibold text-gray-700 dark:text-gray-200">Section 2</h3>
      <ul class="mt-2 space-y-2 text-gray-600 dark:text-gray-300">
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link A</a></li>
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link B</a></li>
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link C</a></li>
      </ul>
    </div>
    <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h3 class="font-semibold text-gray-700 dark:text-gray-200">Section 3</h3>
      <ul class="mt-2 space-y-2 text-gray-600 dark:text-gray-300">
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Page X</a></li>
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Page Y</a></li>
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Page Z</a></li>
      </ul>
    </div>
  </div>
</div>