Rechercher des composants

Catégories

Composants Infographies

Infographies

Représentations visuelles d’informations ou de données

Composant Infographie

Un composant d’infographie réactif avec de petites animations attrayantes qui répondent aux actions de l’utilisateur avec la prise en charge du thème sombre, créé à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 overflow-hidden transition-all transform hover:scale-105">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Infographics</h2>
    <div class="flex flex-wrap">
        <div class="w-full md:w-1/3 flex items-center mb-4">
            <img src="https://picsum.photos/200/300" alt="Placeholder Image" class="w-20 h-20 rounded-full shadow-lg mr-4">
            <div>
                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Engagement</h3>
                <p class="text-gray-600 dark:text-gray-400">50%</p>
            </div>
        </div>
        <div class="w-full md:w-1/3 flex items-center mb-4">
            <img src="https://picsum.photos/200/300?random=1" alt="Placeholder Image" class="w-20 h-20 rounded-full shadow-lg mr-4">
            <div>
                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Retention</h3>
                <p class="text-gray-600 dark:text-gray-400">70%</p>
            </div>
        </div>
        <div class="w-full md:w-1/3 flex items-center mb-4">
            <img src="https://picsum.photos/200/300?random=2" alt="Placeholder Image" class="w-20 h-20 rounded-full shadow-lg mr-4">
            <div>
                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Conversion</h3>
                <p class="text-gray-600 dark:text-gray-400">30%</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Profiles</h3>
        <div class="flex flex-wrap">
            <div class="w-1/2 md:w-1/4 flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow">
                <p class="ml-2 text-gray-600 dark:text-gray-400">John Doe</p>
            </div>
            <div class="w-1/2 md:w-1/4 flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow">
                <p class="ml-2 text-gray-600 dark:text-gray-400">Jane Smith</p>
            </div>
            <div class="w-1/2 md:w-1/4 flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow">
                <p class="ml-2 text-gray-600 dark:text-gray-400">Mike Johnson</p>
            </div>
            <div class="w-1/2 md:w-1/4 flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow">
                <p class="ml-2 text-gray-600 dark:text-gray-400">Emily Davis</p>
            </div>
        </div>
    </div>
</div>

Composant Infographie

Un composant d’infographie réactif avec des micro-interactions attrayantes et une prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 m-4 transition-all duration-300">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Engaging Infographics</h2>
  <div class="flex flex-col md:flex-row gap-4">
    <div class="bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
      <img src="https://picsum.photos/300/200?random=1" alt="Infographic Image" class="w-full">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Infographic 1</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of infographic 1.</p>
      </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
      <img src="https://picsum.photos/300/200?random=2" alt="Infographic Image" class="w-full">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Infographic 2</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of infographic 2.</p>
      </div>
    </div>
  </div>
  <div class="mt-4 flex items-center">
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
    <div class="ml-3">
      <h4 class="text-md font-semibold text-gray-800 dark:text-white">John Doe</h4>
      <span class="text-sm text-gray-500 dark:text-gray-400">Created: 2 hours ago</span>
    </div>
  </div>
</div>

Composant Infographie

Un composant d’infographie minimaliste avec des espaces propres et des éléments minimaux, la prise en charge du design réactif et du thème sombre.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Infographics Title</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        <div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for statistic 1</p>
        </div>
        <div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for statistic 2</p>
        </div>
        <div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for statistic 3</p>
        </div>
    </div>
    <div class="mt-6 border-t pt-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Additional Insights</h3>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
            <p class="text-gray-600 dark:text-gray-400">This is an additional insight provided by User</p>
        </div>
    </div>
</div>

Composant Infographie

Un composant d’infographie conçu avec skeuomorphism, avec des effets réactifs et la prise en charge des thèmes sombres, à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-xl mx-auto">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Infographics Component</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md"> 
            <img src="https://picsum.photos/200/100" alt="Placeholder Image" class="w-full h-auto rounded-md mb-2">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Section Title</h3>
            <p class="text-gray-600 dark:text-gray-300">This is a description of this section. It mimics a real-world interface.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md"> 
            <img src="https://picsum.photos/200/101" alt="Placeholder Image" class="w-full h-auto rounded-md mb-2">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Another Section</h3>
            <p class="text-gray-600 dark:text-gray-300">Details about this section are displayed here, using a real-world inspired design.</p>
        </div>
    </div>
    <div class="flex items-center justify-between mt-6">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <span class="ml-2 text-gray-800 dark:text-gray-200 font-medium">User Name</span>
        </div>
        <span class="text-gray-600 dark:text-gray-300">3 hours ago</span>
    </div>
</div>