Componentes de búsqueda

Categorías

Componentes Componentes de diseño

Componentes de diseño

Componentes que estructuran el diseño general de la página

Diseño de la cartera de neumorfismo

Un diseño de neumorfismo simple y receptivo para una cartera, compatible con el modo oscuro.

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-8">
  <div class="container mx-auto">
    <!-- Header -->
    <header class="p-6 mb-8 bg-gray-300 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h1 class="text-3xl font-bold text-gray-800 dark:text-white">My Portfolio</h1>
    </header>

    <!-- Main Content -->
    <main class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Project Card -->
      <div class="bg-gray-300 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Project Title 1</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project 1.</p>
        <img src="https://picsum.photos/400/250" alt="Project Image" class="rounded-lg shadow-md mb-4">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Learn More</a>
      </div>

      <!-- Project Card -->
      <div class="bg-gray-300 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Project Title 2</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project 2.</p>
         <img src="https://picsum.photos/400/250" alt="Project Image" class="rounded-lg shadow-md mb-4">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Learn More</a>
      </div>
    </main>

    <!-- Footer -->
    <footer class="mt-8 p-6 bg-gray-300 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-center text-gray-700 dark:text-gray-300">
      <p>&copy; 2023 My Portfolio</p>
    </footer>
  </div>
</div>

<style>
/* Custom Neumorphism Shadows */
.shadow-neumorphic-light {
  box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}

.dark .shadow-neumorphic-dark {
  box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #363636;
}
</style>

Componentes de diseño

Un componente de diseño complejo diseñado para blogs y consumo de contenido, con microinteracciones y una combinación de colores complementaria. Incluye varios elementos interactivos y es compatible con el modo oscuro.

Abrir Vista previa

                <div class="bg-gray-100 dark:bg-gray-800 min-h-screen">
    <header class="bg-blue-500 dark:bg-blue-700 p-4 shadow-md transition-colors duration-300">
        <h1 class="text-white text-2xl font-bold">My Blog</h1>
        <nav class="mt-2">
            <ul class="flex space-x-4">
                <li><a href="#" class="text-white hover:text-blue-300 transition duration-200">Home</a></li>
                <li><a href="#" class="text-white hover:text-blue-300 transition duration-200">About</a></li>
                <li><a href="#" class="text-white hover:text-blue-300 transition duration-200">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main class="py-10 px-4 sm:px-8 lg:px-16">
        <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <article class="bg-white dark:bg-gray-900 rounded-lg p-5 shadow-md transition-transform duration-300 transform hover:scale-105">
                <img src="https://picsum.photos/400/200" alt="Blog Post" class="rounded-t-lg w-full">
                <h2 class="text-xl font-semibold mt-3">Blog Post Title</h2>
                <p class="text-gray-700 dark:text-gray-300 mt-2">This is a brief description of the blog post. Click to read more...</p>
                <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">Read More</button>
            </article>
            <article class="bg-white dark:bg-gray-900 rounded-lg p-5 shadow-md transition-transform duration-300 transform hover:scale-105">
                <img src="https://picsum.photos/400/200?2" alt="Blog Post" class="rounded-t-lg w-full">
                <h2 class="text-xl font-semibold mt-3">Another Blog Post Title</h2>
                <p class="text-gray-700 dark:text-gray-300 mt-2">This is another brief description. Click to read more...</p>
                <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">Read More</button>
            </article>
            <article class="bg-white dark:bg-gray-900 rounded-lg p-5 shadow-md transition-transform duration-300 transform hover:scale-105">
                <img src="https://picsum.photos/400/200?3" alt="Blog Post" class="rounded-t-lg w-full">
                <h2 class="text-xl font-semibold mt-3">Yet Another Blog Post Title</h2>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of yet another blog post. Click to read more...</p>
                <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">Read More</button>
            </article>
        </section>
    </main>

    <footer class="bg-blue-500 dark:bg-blue-700 p-4 text-center text-white">
        <p>&copy; 2023 My Blog</p>
    </footer>
</div>

Diseño de negocio de Glassmorphism

Un componente de diseño de glassmorphism simple y receptivo con soporte para modo oscuro usando Tailwind CSS, con tonos tierra.

Abrir Vista previa

                <div class="bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center">
  <div class="bg-white dark:bg-gray-800 bg-opacity-70 dark:bg-opacity-70 p-8 rounded-xl shadow-lg w-4/5 md:w-2/3 lg:w-1/2 backdrop-filter backdrop-blur-lg">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Business Layout Component</h1>
    <p class="text-gray-600 dark:text-gray-300">This is a simple layout component showcasing glassmorphism with earth tones, suitable for business websites. It is responsive and supports dark mode.</p>
    <div class="mt-6 flex flex-col md:flex-row justify-between items-center">
      <div class="text-gray-700 dark:text-gray-200 mb-4 md:mb-0">
        <p>Contact Information:</p>
        <p>Email: [email protected]</p>
        <p>Phone: (123) 456-7890</p>
      </div>
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16">
    </div>
  </div>
</div>

Componente de diseño

Un componente de diseño de blog responsivo diseñado con los principios de Material Design, que utiliza un esquema de color monocromático y admite el modo oscuro.

Abrir Vista previa

                <div class="bg-gray-100 dark:bg-gray-800 min-h-screen p-6">
    <div class="container mx-auto">
        <header class="text-center mb-10">
            <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200">My Blog</h1>
            <p class="text-gray-600 dark:text-gray-400">Insights, stories, and thoughts</p>
        </header>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <article class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-5">
                <img src="https://picsum.photos/300/200" alt="Blog post image" class="rounded-md mb-4"/>
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 1</h2>
                <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
                <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Read more</a>
            </article>
            <article class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-5">
                <img src="https://picsum.photos/300/200?random=1" alt="Blog post image" class="rounded-md mb-4"/>
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 2</h2>
                <p class="text-gray-600 dark:text-gray-400">Suspendisse potenti. In hac habitasse platea dictumst...</p>
                <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Read more</a>
            </article>
            <article class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-5">
                <img src="https://picsum.photos/300/200?random=2" alt="Blog post image" class="rounded-md mb-4"/>
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 3</h2>
                <p class="text-gray-600 dark:text-gray-400">Curabitur nec libero vel arcu elementum mattis...</p>
                <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Read more</a>
            </article>
        </div>
        <footer class="mt-10 text-center">
            <p class="text-gray-600 dark:text-gray-400">© 2023 My Blog. All rights reserved.</p>
        </footer>
    </div>
</div>

Componente Componentes de diseño

Un diseño de componente web responsivo que sigue los principios de Material Design para una aplicación de redes sociales con soporte para temas oscuros.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Social Media Layout</h2>
    <div class="grid grid-cols-1 gap-4">
        <!-- Profile Header -->
        <div class="flex items-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">John Doe</h3>
                <p class="text-gray-600 dark:text-gray-300">@johndoe</p>
            </div>
        </div>
        <!-- Post Content -->
        <div class="p-4 bg-gray-100 dark:bg-gray-600 rounded-lg">
            <p class="text-gray-800 dark:text-gray-200 mb-2">This is a simple post layout demonstrating the use of Material Design principles.</p>
            <img src="https://picsum.photos/300/200" alt="Post Image" class="w-full h-auto rounded-lg">
        </div>
        <!-- Action Buttons -->
        <div class="flex justify-around mt-4">
            <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 dark:bg-blue-800 dark:hover:bg-blue-700">Like</button>
            <button class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 dark:bg-green-800 dark:hover:bg-green-700">Comment</button>
            <button class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 dark:bg-red-800 dark:hover:bg-red-700">Share</button>
        </div>
    </div>
</div>

Glassmorphism Componente de diseño de características de comercio electrónico

Abrir Vista previa

                <div class="container mx-auto px-4 py-8 dark:bg-gray-900">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <!-- Feature 1 -->
    <div class="bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg">
      <img src="https://picsum.photos/400/300" alt="Feature Image 1" class="rounded-lg mb-4">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Feature Title 1</h3>
      <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>

    <!-- Feature 2 -->
    <div class="bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg">
      <img src="https://picsum.photos/400/300" alt="Feature Image 2" class="rounded-lg mb-4">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Feature Title 2</h3>
      <p class="text-gray-600 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <!-- Feature 3 -->
    <div class="bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg">
      <img src="https://picsum.photos/400/300" alt="Feature Image 3" class="rounded-lg mb-4">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Feature Title 3</h3>
      <p class="text-gray-600 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
  </div>
</div>

Componente de diseño de comercio electrónico

Un componente de diseño de comercio electrónico responsivo con soporte para temas oscuros, construido con Tailwind CSS siguiendo los principios de Material Design. Incluye una barra de navegación, un área de contenido principal con listados de productos y un pie de página. La combinación de colores es pastel.

Abrir Vista previa

                <div class="min-h-screen bg-pastel-100 dark:bg-pastel-900">
  <!-- Navigation Bar -->
  <nav class="bg-pastel-200 dark:bg-pastel-800 shadow">
    <div class="container mx-auto px-6 py-3">
      <div class="flex items-center justify-between">
        <div class="text-pastel-900 dark:text-pastel-100 font-semibold text-xl">My E-commerce</div>
        <div class="flex items-center space-x-4">
          <a href="#" class="text-pastel-900 dark:text-pastel-100 hover:text-pastel-700 dark:hover:text-pastel-300">Home</a>
          <a href="#" class="text-pastel-900 dark:text-pastel-100 hover:text-pastel-700 dark:hover:text-pastel-300">Shop</a>
          <a href="#" class="text-pastel-900 dark:text-pastel-100 hover:text-pastel-700 dark:hover:text-pastel-300">Cart</a>
        </div>
      </div>
    </div>
  </nav>

  <!-- Main Content Area -->
  <main class="container mx-auto mt-6 px-6 py-3">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Product Card (Repeat this block for multiple products) -->
      <div class="bg-white dark:bg-pastel-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/300/200" alt="Product Image">
        <div class="p-4">
          <h3 class="text-pastel-900 dark:text-pastel-100 font-semibold text-lg mb-2">Product Name</h3>
          <p class="text-pastel-700 dark:text-pastel-300 text-sm mb-4">This is a brief description of the product.</p>
          <div class="flex items-center justify-between">
            <span class="text-pastel-900 dark:text-pastel-100 font-bold text-xl">$19.99</span>
            <button class="bg-pastel-500 hover:bg-pastel-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>
      <!-- End Product Card -->

      <!-- Example of another product card -->
       <div class="bg-white dark:bg-pastel-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/300/200" alt="Product Image">
        <div class="p-4">
          <h3 class="text-pastel-900 dark:text-pastel-100 font-semibold text-lg mb-2">Another Product</h3>
          <p class="text-pastel-700 dark:text-pastel-300 text-sm mb-4">This is a brief description of another product.</p>
          <div class="flex items-center justify-between">
            <span class="text-pastel-900 dark:text-pastel-100 font-bold text-xl">$25.00</span>
            <button class="bg-pastel-500 hover:bg-pastel-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- Footer -->
  <footer class="bg-pastel-200 dark:bg-pastel-800 mt-6 py-6">
    <div class="container mx-auto text-center text-pastel-900 dark:text-pastel-100">
      <p>&copy; 2023 My E-commerce. All rights reserved.</p>
    </div>
  </footer>
</div>

Componente Componentes de diseño

Un componente de diseño de portafolio responsivo con una estética de diseño retro / vintage, que utiliza un esquema de color análogo y está diseñado para una complejidad media con funciones interactivas para mostrar trabajos o productos.

Abrir Vista previa

                <div class="min-h-screen bg-gray-800 text-white p-6">
    <header class="mb-6">
        <h1 class="text-4xl font-bold text-center">My Retro Portfolio</h1>
    </header>
    <main class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=1" alt="Portfolio Item 1" class="w-full h-48 object-cover rounded-md">
            <h2 class="mt-2 text-xl font-semibold">Project Title 1</h2>
            <p class="text-gray-300">Description of the project showcasing the retro design style.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=2" alt="Portfolio Item 2" class="w-full h-48 object-cover rounded-md">
            <h2 class="mt-2 text-xl font-semibold">Project Title 2</h2>
            <p class="text-gray-300">Description of the project highlighting nostalgic elements from the past eras.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=3" alt="Portfolio Item 3" class="w-full h-48 object-cover rounded-md">
            <h2 class="mt-2 text-xl font-semibold">Project Title 3</h2>
            <p class="text-gray-300">Description of the project with a vintage flair and interactive features.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=4" alt="Portfolio Item 4" class="w-full h-48 object-cover rounded-md">
            <h2 class="mt-2 text-xl font-semibold">Project Title 4</h2>
            <p class="text-gray-300">Snapshot of the work that resonates with the audience's nostalgia.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=5" alt="Portfolio Item 5" class="w-full h-48 object-cover rounded-md">
            <h2 class="mt-2 text-xl font-semibold">Project Title 5</h2>
            <p class="text-gray-300">Work details that emphasize the vintage aesthetics of the project.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=6" alt="Portfolio Item 6" class="w-full h-48 object-cover rounded-md">
            <h2 class="mt-2 text-xl font-semibold">Project Title 6</h2>
            <p class="text-gray-300">Project insights with a nostalgic touch to engage viewers.</p>
        </div>
    </main>
    <footer class="mt-6 text-center">
        <h3 class="text-lg font-medium">About Me</h3>
        <div class="flex justify-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 border-2 border-gray-500">
        </div>
        <p class="mt-2">Check out my work and get in touch!</p>
    </footer>
</div>

Componente Componentes de diseño

Un componente de diseño responsivo que muestra microinteracciones a través de animaciones atractivas que responden a las acciones del usuario, con soporte para el modo oscuro y utilizando Tailwind CSS.

Abrir Vista previa

                <div class="p-6 bg-white dark:bg-gray-800 rounded-md shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105">
    <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white transition-transform duration-200">User Profile</h2>
    <div class="flex items-center mb-4">
        <img class="w-16 h-16 rounded-full shadow-md transform hover:scale-110 transition-transform duration-300" 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-gray-200">John Doe</h3>
            <p class="text-gray-600 dark:text-gray-400">Software Developer</p>
        </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">Follow</button>
</div>

<div class="p-6 bg-white dark:bg-gray-800 rounded-md shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 mt-6">
    <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white transition-transform duration-200">Images Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <img class="w-full h-32 object-cover rounded-md shadow-lg transform hover:scale-105 transition-transform duration-300" src="https://picsum.photos/200/200?random=1" alt="Random Image">
        <img class="w-full h-32 object-cover rounded-md shadow-lg transform hover:scale-105 transition-transform duration-300" src="https://picsum.photos/200/200?random=2" alt="Random Image">
        <img class="w-full h-32 object-cover rounded-md shadow-lg transform hover:scale-105 transition-transform duration-300" src="https://picsum.photos/200/200?random=3" alt="Random Image">
    </div>
</div>

<div class="p-6 bg-white dark:bg-gray-800 rounded-md shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 mt-6">
    <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white transition-transform duration-200">Contact Us</h2>
    <form>
        <input type="text" placeholder="Your Name" class="border border-gray-300 dark:border-gray-700 rounded-md p-2 mb-4 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all duration-300" />
        <input type="email" placeholder="Your Email" class="border border-gray-300 dark:border-gray-700 rounded-md p-2 mb-4 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all duration-300" />
        <textarea placeholder="Your Message" class="border border-gray-300 dark:border-gray-700 rounded-md p-2 mb-4 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all duration-300"></textarea>
        <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">Send Message</button>
    </form>
</div>

Componente de diseño 3D

Un componente de diseño 3D receptivo con imágenes atractivas, que incorpora profundidad a través de sombras y capas. Incluye soporte para el modo oscuro y presenta imágenes y avatares aleatorios.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="max-w-4xl w-full p-6 rounded-lg shadow-2xl bg-white dark:bg-gray-800 transform transition-transform duration-300 hover:scale-105">
        <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">3D Layout Component</h1>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="p-4 bg-gray-50 dark:bg-gray-700 shadow-lg rounded-lg hover:shadow-2xl transition-shadow duration-300">
                <img src="https://picsum.photos/300/200?random=1" alt="Random Image 1" class="w-full h-48 object-cover rounded-lg mb-4">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 1</h2>
                <p class="text-gray-600 dark:text-gray-300">This is a brief description of the first card item. It's designed to entice the user.</p>
            </div>
            <div class="p-4 bg-gray-50 dark:bg-gray-700 shadow-lg rounded-lg hover:shadow-2xl transition-shadow duration-300">
                <img src="https://picsum.photos/300/200?random=2" alt="Random Image 2" class="w-full h-48 object-cover rounded-lg mb-4">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 2</h2>
                <p class="text-gray-600 dark:text-gray-300">This is a brief description of the second card item. It's designed to entice the user.</p>
            </div>
        </div>
        <div class="mt-6">
            <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Featured Users</h3>
            <div class="flex flex-wrap">
                <div class="bg-gray-50 dark:bg-gray-700 rounded-full p-2 shadow-lg m-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-12 h-12 object-cover rounded-full">
                </div>
                <div class="bg-gray-50 dark:bg-gray-700 rounded-full p-2 shadow-lg m-2">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-12 h-12 object-cover rounded-full">
                </div>
                <div class="bg-gray-50 dark:bg-gray-700 rounded-full p-2 shadow-lg m-2">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-12 h-12 object-cover rounded-full">
                </div>
                <div class="bg-gray-50 dark:bg-gray-700 rounded-full p-2 shadow-lg m-2">
                    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User 4" class="w-12 h-12 object-cover rounded-full">
                </div>
            </div>
        </div>
    </div>
</div>