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

Un composant d’affichage de contenu conçu dans un style skeuomorphe pour le commerce électronique avec un thème sombre. Il présente des produits avec un minimum d’éléments, en utilisant une palette de couleurs analogue pour une esthétique agréable.

Ouvrir Aperçu

                <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
  <div class="flex flex-col justify-center items-center">
    <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/500/300" alt="Product Image">
    <div class="bg-white dark:bg-gray-800 p-4 rounded-b-lg w-full">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Product Name</h2>
      <p class="text-gray-600 dark:text-gray-300">$29.99</p>
      <p class="text-gray-700 dark:text-gray-300">A short description of the product goes here, detailing its features and benefits.</p>
      <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full border-2 border-gray-200 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="text-gray-800 dark:text-gray-200 ml-2">Seller Name</span>
      </div>
      <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-bold py-2 px-4 rounded hover:bg-blue-800 dark:hover:bg-blue-600">Add to Cart</button>
    </div>
  </div>
</div>

Composant Composants d’affichage de contenu

Un composant d’affichage de contenu réactif conçu pour les sites Web d’entreprise/d’entreprise avec prise en charge du mode sombre et une palette de couleurs vives. Il comprend des sections pour les avatars des utilisateurs, le contenu textuel et les images.

Ouvrir Aperçu

                <div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-4">Our Team</h2>
    <div class="grid md:grid-cols-2 gap-5">
        <div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
            <img class="w-full rounded-lg" src="https://picsum.photos/300/200" alt="Content Image">
            <div class="flex items-center mt-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
                <div class="ml-3">
                    <p class="text-lg font-semibold">John Doe</p>
                    <p class="text-sm text-gray-400">CEO</p>
                </div>
            </div>
            <p class="mt-2 text-gray-300">John is the visionary behind the company, driving innovation and strategies.</p>
        </div>
        <div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
            <img class="w-full rounded-lg" src="https://picsum.photos/300/201" alt="Content Image">
            <div class="flex items-center mt-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
                <div class="ml-3">
                    <p class="text-lg font-semibold">Jane Smith</p>
                    <p class="text-sm text-gray-400">CTO</p>
                </div>
            </div>
            <p class="mt-2 text-gray-300">Jane oversees all technical aspects, ensuring seamless operations.</p>
        </div>
    </div>
    <h2 class="text-2xl font-bold mt-10 mb-4">Company Achievements</h2>
    <div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
        <ul class="list-disc list-inside">
            <li class="mt-2 text-gray-300">Awarded "Best Startup of the Year".</li>
            <li class="mt-2 text-gray-300">Reached over 10,000 active users in under a year.</li>
            <li class="mt-2 text-gray-300">Secured $1 million in funding.</li>
        </ul>
    </div>
</div>

Composant d’affichage du contenu

Un composant d’affichage de contenu réactif de style Glassmorphism, avec un arrière-plan flou et des éléments translucides avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-5">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 backdrop-filter backdrop-blur-lg bg-opacity-30 border border-gray-200 dark:border-gray-700">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Content Display Title</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">This component features a glassmorphism style with blurred background and translucent elements.</p>
        <div class="flex items-center space-x-4 mb-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">User Name</h3>
                <span class="text-sm text-gray-500 dark:text-gray-400">User Title</span>
            </div>
        </div>
        <img src="https://picsum.photos/400/200" alt="Random Image" class="rounded-lg mb-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded transition duration-200">Read More</button>
    </div>
</div>

Composant d’affichage du contenu

Un composant d’affichage de contenu avec une conception glassmorphism avec une mise en page réactive et une prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-6 max-w-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Featured Content</h2>
    <p class="text-gray-700 dark:text-gray-300 mt-2">This is a content display component that utilizes glassmorphism design principles. It features a blurred background and translucent elements for a modern look.</p>
    <div class="mt-4">
      <img src="https://picsum.photos/300/200" alt="Random Image" class="rounded-lg" />
    </div>
    <div class="mt-4 flex items-center">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 mr-3" />
      <span class="text-gray-600 dark:text-gray-300">John Doe</span>
    </div>
  </div>
</div>

Composant Composants d’affichage de contenu

Un composant d’affichage de contenu avec des microinteractions, une conception réactive et la prise en charge du thème sombre à l’aide de Tailwind CSS. Propose des effets de survol subtils et des animations de concentration sur des éléments interactifs.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
  <div class="max-w-sm mx-auto rounded-lg shadow-lg bg-white dark:bg-gray-800 overflow-hidden">
    <img class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" src="https://picsum.photos/600/400" alt="Placeholder image">
    <div class="p-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2 transform transition duration-500 hover:text-indigo-600 dark:hover:text-indigo-400">Component Title</h2>
      <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4 transform transition duration-500 hover:translate-x-1">This is a description of the content. It is responsive and supports dark theme.</p>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-4 transform transition duration-500 hover:rotate-6" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of the author">
          <div class="text-sm">
            <p class="text-gray-900 dark:text-white leading-none transform transition duration-500 hover:underline">John Doe</p>
            <p class="text-gray-600 dark:text-gray-400">7 min read</p>
          </div>
        </div>
        <button class="px-3 py-1 bg-indigo-500 text-white text-xs font-bold rounded hover:bg-indigo-600 dark:bg-indigo-700 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-opacity-50 transform transition duration-500 hover:-translate-y-1">Read More</button>
      </div>
    </div>
  </div>
</div>

Composant d’affichage du contenu

Un composant d’affichage nostalgique au design rétro, avec des effets réactifs et une prise en charge du thème sombre.

Ouvrir Aperçu

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

Composant d’affichage du contenu

Un composant d’affichage de contenu réactif qui intègre des micro-interactions avec des animations attrayantes axées sur les actions de l’utilisateur. Il inclut la prise en charge du mode sombre et des espaces réservés pour les images et les avatars.

Ouvrir Aperçu

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="flex items-center p-4 border-b border-gray-200 dark:border-gray-700">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300">John Doe</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">Software Engineer</p>
        </div>
    </div>
    <div class="p-4">
        <img src="https://picsum.photos/400/200" alt="Placeholder Image" class="w-full rounded-lg hover:scale-105 transition-transform duration-300">
        <p class="mt-2 text-gray-700 dark:text-gray-300">This is a brief description of the content. It engages the user with interesting information and encourages interaction.</p>
        <a href="#" class="inline-block mt-4 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-300">Read More</a>
    </div>
</div>

Composants d’affichage de contenu Composant 11

Un composant d’affichage de contenu de style rétro/vintage présentant des designs nostalgiques des années 80/90, avec des effets réactifs et une prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="flex flex-col md:flex-row items-center p-6">
        <img class="w-full md:w-1/3 h-auto rounded-lg mb-4 md:mb-0" src="https://picsum.photos/300/200?random=1" alt="Random retro image">
        <div class="md:ml-4">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Retro/Vintage Title</h2>
            <p class="text-gray-600 dark:text-gray-400 mb-2">This is a nostalgic description that evokes the design style of the 80s and 90s, full of vibrant colors and retro aesthetics.</p>
            <div class="flex items-center">
                <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                <span class="text-gray-700 dark:text-gray-300">Posted by <span class="font-bold">User Name</span></span>
            </div>
        </div>
    </div>
    <div class="p-6">
        <p class="text-gray-700 dark:text-gray-300">Here’s a bit more detail about the content. This section can be used to provide additional context or information.</p>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 p-4 text-right">
        <button class="bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Read More</button>
    </div>
</div>