Rechercher des composants

Catégories

Composants Composants de mise en page

Composants de mise en page

Composants qui structurent la mise en page globale

Présentation du portefeuille Neumorphism

Une mise en page Neumorphism simple et réactive pour un portfolio, prenant en charge le mode sombre.

                <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>

Composants de mise en page

Il s’agit d’un composant de mise en page complexe conçu pour les blogs et la consommation de contenu, avec des micro-interactions et une palette de couleurs complémentaires. Il comprend divers éléments interactifs et prend en charge le mode sombre.

Ouvrir Aperçu

                <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>

Glassmorphism Aménagement d’entreprise

Un composant de mise en page glassmorphism simple et réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS, avec des tons de terre.

Ouvrir Aperçu

                <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>

Composant de mise en page

Un composant de mise en page de blog réactif conçu selon les principes de Material Design, utilisant une palette de couleurs monochromatique et prenant en charge le mode sombre.

Ouvrir Aperçu

                <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>

Composant Composants de mise en page

Une mise en page de composant Web réactive suivant les principes de conception matérielle pour une application de médias sociaux avec prise en charge du thème sombre.

Ouvrir Aperçu

                <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 E-commerce Feature Layout Component

Ouvrir Aperçu

                <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>

Composant de mise en page du commerce électronique

Un composant de mise en page e-commerce réactif avec prise en charge du thème sombre, construit avec Tailwind CSS selon les principes de Material Design. Il comprend une barre de navigation, une zone de contenu principale avec des listes de produits et un pied de page. La palette de couleurs est pastel.

Ouvrir Aperçu

                <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>

Composant Composants de mise en page

Un composant de mise en page de portfolio réactif doté d’une esthétique rétro/vintage, utilisant une palette de couleurs analogue et conçu pour une complexité moyenne avec des fonctionnalités interactives pour présenter des travaux ou des produits.

Ouvrir Aperçu

                <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>

Composant Composants de mise en page

Un composant de mise en page réactive présentant des micro-interactions par le biais d’animations attrayantes qui répondent aux actions de l’utilisateur, avec prise en charge du mode sombre et de l’utilisation de Tailwind CSS.

Ouvrir Aperçu

                <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>

Composant de mise en page 3D

Un composant de mise en page de conception 3D réactif avec des visuels attrayants, incorporant de la profondeur à travers les ombres et les couches. Il inclut la prise en charge du mode sombre et propose des images et des avatars aléatoires.

Ouvrir Aperçu

                <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>