Rechercher des composants

Catégories

Composants Composants d’affichage du contenu

Composants d’affichage du contenu

Composants qui présentent et organisent le contenu du site Web

Composant d’affichage du contenu

Composant d’affichage de contenu de style 3D présentant des travaux ou des produits de portefeuille avec une palette de couleurs en niveaux de gris et une conception réactive incluant la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="max-w-4xl mx-auto p-6">
    <h2 class="text-3xl font-bold mb-6 text-gray-900 dark:text-white">Portfolio Showcase</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 1</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 2</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 3</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=4" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 4</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=5" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 5</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=6" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 6</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
    </div>
</div>

Composant Composants d’affichage de contenu

Un composant d’affichage de contenu réactif avec prise en charge du mode sombre pour les sites Web d’entreprise.

Ouvrir Aperçu

                <div class="dark:bg-gray-900 dark:text-gray-200 py-12">
  <div class="container mx-auto px-4">
    <div class="md:flex md:items-center md:justify-between">
      <div class="md:w-1/2">
        <h2 class="text-3xl font-bold mb-4">Our Mission</h2>
        <p class="mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Learn More</button>
      </div>
      <div class="md:w-1/2 mt-8 md:mt-0">
        <img src="https://images.unsplash.com/photo-1588702547930-db7c329119ba?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Mission Image" class="rounded-lg shadow-lg">
      </div>
    </div>

    <div class="md:flex md:items-center md:justify-between mt-12">
      <div class="md:w-1/2 mb-8 md:mb-0">
        <img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34ac?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Values Image" class="rounded-lg shadow-lg">
      </div>
      <div class="md:w-1/2 md:pl-8">
        <h2 class="text-3xl font-bold mb-4">Our Values</h2>
        <ul class="list-disc list-inside">
          <li class="mb-2">Integrity and Honesty</li>
          <li class="mb-2">Customer Focus</li>
          <li class="mb-2">Innovation and Excellence</li>
          <li class="mb-2">Teamwork and Collaboration</li>
        </ul>
      </div>
    </div>

    <div class="mt-12 text-center">
      <h2 class="text-3xl font-bold mb-6">What Our Clients Say</h2>
      <div class="md:flex md:-mx-4">
        <div class="md:w-1/3 px-4 mb-8 md:mb-0">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
            <p class="italic mb-4">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <div class="flex items-center justify-center">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full mr-4">
              <div>
                <p class="font-bold">John Smith</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">CEO, Company A</p>
              </div>
            </div>
          </div>
        </div>
        <div class="md:w-1/3 px-4 mb-8 md:mb-0">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
            <p class="italic mb-4">"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
            <div class="flex items-center justify-center">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full mr-4">
              <div>
                <p class="font-bold">Jane Doe</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Marketing Director, Company B</p>
              </div>
            </div>
          </div>
        </div>
        <div class="md:w-1/3 px-4">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
            <p class="italic mb-4">"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."</p>
            <div class="flex items-center justify-center">
              <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full mr-4">
              <div>
                <p class="font-bold">Peter Jones</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">CTO, Company C</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Composants d’affichage du contenu

Un composant simple d’affichage de contenu réactif de style vintage pour le commerce électronique, utilisant une palette de couleurs monochromatiques et prenant en charge le mode sombre.

Ouvrir Aperçu

                <div class="max-w-md mx-auto bg-gray-800 dark:bg-gray-900 rounded-lg overflow-hidden shadow-lg">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic1/400/300" alt="Product Image">
    <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-100 dark:text-gray-200 mb-2">Vintage Product Title</h2>
        <p class="text-gray-300 dark:text-gray-400 mb-4">A brief description of the vintage product that evokes nostalgia from the 80s and 90s.</p>
        <div class="flex items-center mb-4">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div class="text-sm">
                <p class="text-gray-100 dark:text-gray-200">Seller Name</p>
                <p class="text-gray-500 dark:text-gray-400">Seller Rating: ⭐⭐⭐⭐</p>
            </div>
        </div>
        <span class="text-lg font-semibold text-gray-100 dark:text-gray-200">$29.99</span>
        <div class="mt-4">
            <button class="w-full bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
        </div>
    </div>
</div>

Composant Composants d’affichage de contenu

Composant d’affichage de contenu Glassmorphism avec tons de terre

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-12">
  <div class="container mx-auto px-4">
    <div class="bg-white/30 dark:bg-gray-800/30 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 md:p-10">
      <div class="grid md:grid-cols-3 gap-8">
        <div class="md:col-span-2">
          <img src="https://picsum.photos/seed/content1/800/400" alt="Featured content image" class="rounded-lg shadow-md mb-6">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-white mb-4">The Beauty of Nature's Colors</h2>
          <div class="flex items-center text-gray-600 dark:text-gray-300 text-sm mb-6">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author avatar" class="w-8 h-8 rounded-full mr-3">
            <span>By John Doe</span>
            <span class="mx-3">&middot;</span>
            <span>October 26, 2023</span>
            <span class="mx-3">&middot;</span>
            <span>10 min read</span>
          </div>
          <p class="text-gray-700 dark:text-gray-200 leading-relaxed mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p class="text-gray-700 dark:text-gray-200 leading-relaxed mb-6">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
          <div class="flex flex-wrap gap-3">
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-xs px-3 py-1 rounded-full">Nature</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-xs px-3 py-1 rounded-full">Earth Tones</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-xs px-3 py-1 rounded-full">Design</span>
          </div>
        </div>
        <div>
          <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Related Articles</h3>
          <ul class="space-y-4">
            <li class="flex items-center">
              <img src="https://picsum.photos/seed/related1/100/80" alt="Related article image" class="rounded-md mr-4">
              <div>
                <p class="text-gray-700 dark:text-gray-200 font-semibold">The Power of Natural Landscapes</p>
                <p class="text-gray-600 dark:text-gray-300 text-sm">October 20, 2023</p>
              </div>
            </li>
            <li class="flex items-center">
              <img src="https://picsum.photos/seed/related2/100/80" alt="Related article image" class="rounded-md mr-4">
              <div>
                <p class="text-gray-700 dark:text-gray-200 font-semibold">Bringing the Outdoors In</p>
                <p class="text-gray-600 dark:text-gray-300 text-sm">October 15, 2023</p>
              </div>
            </li>
            <li class="flex items-center">
              <img src="https://picsum.photos/seed/related3/100/80" alt="Related article image" class="rounded-md mr-4">
              <div>
                <p class="text-gray-700 dark:text-gray-200 font-semibold">Sustainable Living with Earth Tones</p>
                <p class="text-gray-600 dark:text-gray-300 text-sm">October 10, 2023</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Composant d’affichage du contenu

Un composant de style glassmorphism pour l’affichage du contenu du portefeuille avec des éléments interactifs, prenant en charge le mode sombre.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center p-5 bg-gray-900 min-h-screen">
    <div class="bg-white dark:bg-gray-800 backdrop-blur-lg bg-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Portfolio Showcase</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-6">Explore my recent work and projects in this beautifully designed portfolio section.</p>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
                <img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=1" alt="Project Image">
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h3>
                    <p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
                    <div class="mt-2">
                        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
                    </div>
                </div>
            </div>

            <div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
                <img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=2" alt="Project Image">
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h3>
                    <p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
                    <div class="mt-2">
                        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
                    </div>
                </div>
            </div>

            <div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
                <img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=3" alt="Project Image">
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h3>
                    <p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
                    <div class="mt-2">
                        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
                    </div>
                </div>
            </div>

            <div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
                <img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=4" alt="Project Image">
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 4</h3>
                    <p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
                    <div class="mt-2">
                        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Composant d’affichage du contenu

Un composant d’affichage de contenu réactif avec un style de design minimaliste et plat, idéal pour les blogs et la consommation de contenu. Il a une palette de couleurs en niveaux de gris et est équipé d’éléments interactifs tout en prenant en charge le mode sombre.

Ouvrir Aperçu

                <div class="max-w-xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
        <div class="ml-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">January 1, 2023</p>
        </div>
    </div>
    <h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">Understanding Minimalism in Design</h3>
    <img class="w-full h-48 object-cover rounded-md my-4" src="https://picsum.photos/640/360?random=1" alt="Content Image">
    <p class="text-gray-700 dark:text-gray-300 mb-4">Minimalism in design is all about simplicity and the use of space. By focusing on fewer elements, designers can create engaging experiences that are not only functional but also aesthetically pleasing. In this blog post, we will explore the principles of minimalism and how they can be applied.</p>
    <a href="#" class="inline-block bg-gray-800 text-white rounded-md px-4 py-2 hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-400">Read More</a>
</div>

Composants d’affichage du contenu

Un composant d’affichage de contenu réactif pour la consommation de blog ou de contenu avec un style de conception 3D et la prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
    <div class="flex items-center mb-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 mr-3" />
        <div class="flex flex-col">
            <span class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</span>
            <span class="text-gray-500 dark:text-gray-400 text-sm">March 10, 2023</span>
        </div>
    </div>
    <h2 class="text-gray-900 dark:text-gray-100 text-xl font-bold mb-2">Exploring the Depths of 3D Design</h2>
    <p class="text-gray-700 dark:text-gray-300 mb-4">Incorporating three-dimensional elements into design can create an engaging experience for users, making the content more appealing and enjoyable to consume. In this post, we explore various techniques...</p>
    <img src="https://picsum.photos/400/200?random=1" alt="3D Design Example" class="rounded-lg mb-4 shadow-md">
    <button class="bg-gray-800 dark:bg-gray-300 text-white dark:text-gray-800 px-4 py-2 rounded-md transition duration-300 hover:bg-gray-700 dark:hover:bg-gray-400">Read More</button>
</div>

Composant d’affichage du contenu

Un composant simple d’affichage de contenu réactif pour les interfaces de médias sociaux, conçu avec les principes de conception matérielle et une palette de couleurs triadique.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto my-8 overflow-hidden">
    <div class="p-4">
        <div class="flex items-center space-x-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div>
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
            </div>
        </div>
        <p class="mt-4 text-gray-700 dark:text-gray-300">
            This is an example of a simple content display component in a social media context, showcasing the Material Design principles with a triadic color scheme.
        </p>
    </div>
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200" alt="Content Image">
    <div class="p-4">
        <div class="flex justify-between items-center">
            <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-600">Like</button>
            <button class="bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-400 dark:bg-green-700 dark:hover:bg-green-600">Share</button>
        </div>
    </div>
</div>

Composants d’affichage du contenu

Un portfolio de conception 3D présentant des travaux ou des produits avec une palette de couleurs en niveaux de gris et un design réactif, prenant en charge le mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-10 flex flex-col items-center justify-center">
    <h1 class="text-3xl font-bold mb-5 text-gray-800 dark:text-gray-200">Portfolio</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
            <img class="w-full h-48 rounded-t-lg" src="https://picsum.photos/300/200?random=1" alt="Artwork 1">
            <div class="p-5">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
            <img class="w-full h-48 rounded-t-lg" src="https://picsum.photos/300/200?random=2" alt="Artwork 2">
            <div class="p-5">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
            <img class="w-full h-48 rounded-t-lg" src="https://picsum.photos/300/200?random=3" alt="Artwork 3">
            <div class="p-5">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
        </div>
    </div>
    <footer class="w-full text-center mt-10 text-gray-600 dark:text-gray-400">
        <p>&copy; 2023 Your Name. All rights reserved.</p>
    </footer>
</div>

Composant d’affichage du contenu

Un composant d’affichage de contenu simple et réactif conçu dans un style brutaliste avec des couleurs complémentaires. Convient aux sites Web d’entreprise / d’entreprise, prenant en charge le mode sombre.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 text-black dark:text-white border border-black dark:border-white p-6 max-w-lg mx-auto">
    <h1 class="text-3xl font-bold mb-4">Company Title</h1>
    <img src="https://picsum.photos/500/300" alt="Content Image" class="w-full rounded-lg mb-4">
    <p class="text-lg mb-6">This is a brief description of the company. Emphasizing clear, bold statements to convey professionalism and competence in a raw form.</p>
    <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
        <div class="">
            <h2 class="text-xl font-semibold">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">CEO</p>
        </div>
    </div>
</div>