Container

                <div class="container mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl">
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/400/200" alt="Blog Image" class="w-full h-48 object-cover rounded-md transition-transform duration-300 ease-in-out hover:scale-105">
        <h2 class="mt-4 text-2xl font-semibold text-gray-800 dark:text-white transition-colors duration-300">Blog Title</h2>
        <p class="mt-2 text-gray-600 dark:text-gray-400 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
            <div class="ml-2">
                <p class="text-gray-800 dark:text-white font-semibold">Author Name</p>
                <p class="text-gray-500 dark:text-gray-400 text-sm">Date Published</p>
            </div>
        </div>
    </div>
</div>
              

                <div class="container mx-auto p-4 shadow-lg rounded-lg bg-white dark:bg-gray-800 transition-colors duration-300">
  <div class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Material Container</div>
  <p class="text-gray-700 dark:text-gray-300">This is a responsive container with Material Design inspired shadows and styling. It also supports dark mode.</p>
  <div class="mt-4">
    <img src="https://picsum.photos/seed/material-container/400/200" alt="Placeholder Image" class="rounded-md shadow-md">
  </div>
  <div class="flex items-center mt-4">
    <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of a user">
    <div class="text-sm">
      <p class="text-gray-900 dark:text-white leading-none">John Doe</p>
      <p class="text-gray-600 dark:text-gray-400">Software Engineer</p>
    </div>
  </div>
</div>
              

                <div class="container mx-auto p-4 bg-gray-200 dark:bg-gray-800 shadow-lg rounded-lg">
  <div class="bg-white dark:bg-gray-700 p-6 rounded-md shadow-inner">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Skeuomorphic Container</h2>
    <p class="text-gray-700 dark:text-gray-300">This is a container with a Skeuomorphic design, featuring a subtle shadow and rounded corners to mimic a physical object. It's also responsive and supports dark mode.</p>
    <div class="mt-4">
      <img src="https://picsum.photos/seed/skeuomorphism/400/200" alt="Placeholder image" class="rounded-md shadow-md">
    </div>
  </div>
</div>
              

                <div class="flex items-center justify-center min-h-screen from-teal-100 via-teal-300 to-teal-500 bg-gradient-to-br dark:from-gray-700 dark:via-gray-900 dark:to-black">
  <div class="bg-white bg-opacity-10 px-10 py-5 border-r-8 border-t-8 border-opacity-30 border-white
    backdrop-filter backdrop-blur-sm shadow-2xl rounded-md w-full max-w-md hover:scale-105 transition duration-500 ease-in-out dark:bg-gray-900 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-30">
    <h1 class="text-3xl font-bold text-gray-900 text-center dark:text-white mb-6">Welcome</h1>
    <p class="text-gray-700 text-center dark:text-gray-300 mb-8">This is a Glassmorphism container component example with responsive effects and dark theme support.</p>
    <div class="flex justify-center">
      <button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-teal-300 to-teal-500 group-hover:from-teal-300 group-hover:to-teal-500 dark:text-white dark:hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-teal-200 dark:focus:ring-teal-800">
        <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
          Get Started
        </span>
      </button>
    </div>
  </div>
</div>
              

                <div class="max-w-4xl mx-auto p-4">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:shadow-xl hover:scale-105">
    <div class="flex items-center p-4">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600">
      <div class="ml-4">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
        <p class="text-gray-600 dark:text-gray-400">Web Developer</p>
      </div>
    </div>
    <img src="https://picsum.photos/800/400" alt="Placeholder Image" class="w-full h-48 object-cover transition-transform duration-500 hover:scale-105">
    <div class="p-4">
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Engaging Title</h3>
      <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
      <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg shadow-md hover:bg-blue-700 transition duration-200 ease-in-out">Learn More</button>
    </div>
  </div>
</div>
              

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
    <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">3D Design Container</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-6">This container showcases a 3D design style with engaging depth. It looks appealing in both light and dark themes.</p>
        <div class="flex items-center">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div>
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h3>
                <p class="text-gray-500 dark:text-gray-400">User Role</p>
            </div>
        </div>
    </div>
    <div class="relative overflow-hidden">
        <img class="w-full h-48 object-cover transform transition-transform duration-300"
            src="https://picsum.photos/800/400?random=1" alt="Random Image">
        <div class="absolute inset-0 bg-gradient-to-t from-black opacity-30"></div>
    </div>
</div>
              

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md mx-auto">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Welcome to Nostalgia</h2>
  <p class="text-gray-600 dark:text-gray-300 mb-4">Experience the charm of the 80s and 90s with our carefully curated content. Dive into the vintage vibes that bring back fond memories.</p>
  <img class="rounded-lg mb-4" src="https://picsum.photos/400/200?random=1" alt="Retro Image" />
  <div class="flex items-center">
    <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
    <div class="ml-4">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h3>
      <p class="text-gray-500 dark:text-gray-400">Retro Enthusiast</p>
    </div>
  </div>
  <button class="mt-6 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out">
    Explore More
  </button>
</div>