Rechercher des composants

Catégories

Composants Graphiques

Graphiques

Représentation visuelle des données à l’aide de graphiques

VibrantGlassmorphismChart

Un composant simple de graphique Glassmorphism avec des couleurs vives, adapté aux blogs et aux sites de contenu. Le composant est réactif et inclut la prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-20">
  <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Sales Overview</h3>
  <div class="relative h-40">
    <canvas id="myChart"></canvas>
  </div>
  <div class="flex justify-around mt-4 text-gray-700 dark:text-gray-300 text-sm">
    <div class="text-center">
      <p class="font-semibold text-teal-500 dark:text-teal-400">January</p>
      <p>$5,200</p>
    </div>
    <div class="text-center">
      <p class="font-semibold text-rose-500 dark:text-rose-400">February</p>
      <p>$6,100</p>
    </div>
    <div class="text-center">
      <p class="font-semibold text-fuchsia-500 dark:text-fuchsia-400">March</p>
      <p>$5,500</p>
    </div>
  </div>
</div>

SkeuomorphismChartsComponent

Composant de graphiques skeuomorphes pour les médias sociaux avec des couleurs complémentaires

Ouvrir Aperçu

                <div class="p-6 bg-gradient-to-br from-gray-200 to-gray-300 rounded-lg shadow-xl dark:from-gray-700 dark:to-gray-800">
  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Activity Chart</h2>
  <div class="relative h-48">
    <canvas id="myChart" class="w-full h-full"></canvas>
    </div>
    <div class="flex justify-around mt-4 text-gray-600 dark:text-gray-300 text-sm">
    <span>Likes</span>
    <span>Comments</span>
    <span>Shares</span>
    <span>Views</span>
    </div>
    </div>

Composant Graphiques de skeuomorphisme

Un composant de graphiques réactifs avec le style Skeuomorphism, des couleurs vives et la prise en charge du mode sombre pour les interfaces de médias sociaux.

Ouvrir Aperçu

                <div class="container mx-auto p-4 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
        <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Community Engagement</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="bg-gradient-to-br from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 p-4 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
                <h3 class="text-xl font-semibold mb-2 text-white">Likes</h3>
                <div class="flex items-center">
                    <div class="text-white text-3xl font-bold mr-2">12,345</div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.382 22H6a2 2 0 01-2-2V6a2 2 0 012-2h2l1 1M14 10V5a2 2 0 00-2-2h-2a2 2 0 00-2 2v5M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.382 22H6a2 2 0 01-2-2V6a2 2 0 012-2h2l1 1m0 9h.01"></path>
                    </svg>
                </div>
            </div>
            <div class="bg-gradient-to-br from-green-400 to-green-600 dark:from-green-600 dark:to-green-800 p-4 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
                <h3 class="text-xl font-semibold mb-2 text-white">Comments</h3>
                 <div class="flex items-center">
                    <div class="text-white text-3xl font-bold mr-2">5,678</div>
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-.55.55a1 1 0 01-1.415 0L9 16z"></path>
                    </svg>
                </div>
            </div>
             <div class="bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 p-4 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
                <h3 class="text-xl font-semibold mb-2 text-white">Shares</h3>
                 <div class="flex items-center">
                    <div class="text-white text-3xl font-bold mr-2">3,210</div>
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.693c-.095.327-.119.65-.073.973.059.416.213.808.46 1.141.28.353.603.676.968.968q.333.247.666.46a2.42 2.42 0 001.141.46c.323.046.646.022.973-.073l.447-.109a1.902 1.902 0 001.058-.582A1 1 0 0117 16v-4a1 1 0 011-1h2a1 1 0 011 1v-1a1 1 0 00-1-1h-3a1 1 0 01-1-1V9a1 1 0 00-1-1H9a1 1 0 00-1 1v4a1 1 0 01-1 1h-.086z"></path>
                    </svg>
                </div>
            </div>
             <div class="bg-gradient-to-br from-red-400 to-red-600 dark:from-red-600 dark:to-red-800 p-4 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
                <h3 class="text-xl font-semibold mb-2 text-white">Views</h3>
                 <div class="flex items-center">
                    <div class="text-white text-3xl font-bold mr-2">45,678</div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</div>

Composant Graphiques

Un composant de graphiques complexe conçu pour les sites Web d’entreprise et d’entreprise, avec une conception 3D, une palette de couleurs complémentaire et une structure réactive avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex flex-col justify-center items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full md:w-3/4 lg:w-3/5">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Business Performance Overview</h2>
    <div class="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4 w-full">
        <div class="flex-initial w-full bg-blue-500 dark:bg-blue-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
            <h3 class="text-xl font-semibold text-white mb-2">Sales Chart</h3>
            <img src="https://picsum.photos/300/200?random=1" alt="Sales Chart" class="rounded-md shadow-lg" />
        </div>
        <div class="flex-initial w-full bg-green-500 dark:bg-green-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
            <h3 class="text-xl font-semibold text-white mb-2">Revenue Chart</h3>
            <img src="https://picsum.photos/300/200?random=2" alt="Revenue Chart" class="rounded-md shadow-lg" />
        </div>
    </div>
    <div class="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4 w-full mt-4">
        <div class="flex-initial w-full bg-purple-500 dark:bg-purple-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
            <h3 class="text-xl font-semibold text-white mb-2">Customer Feedback</h3>
            <img src="https://picsum.photos/300/200?random=3" alt="Customer Feedback" class="rounded-md shadow-lg" />
        </div>
        <div class="flex-initial w-full bg-orange-500 dark:bg-orange-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
            <h3 class="text-xl font-semibold text-white mb-2">Market Analysis</h3>
            <img src="https://picsum.photos/300/200?random=4" alt="Market Analysis" class="rounded-md shadow-lg" />
        </div>
    </div>
    <div class="flex justify-between items-center mt-6 w-full">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-sm" />
        <div class="ml-3">
            <h4 class="text-lg font-semibold text-gray-800 dark:text-white">Analyst: John Doe</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400">Data Analyst, 5 years experience</p>
        </div>
    </div>
</div>

Composant Graphiques

Composant de graphiques complexe conçu pour les applications Web de commerce électronique en mode sombre avec une palette de couleurs en niveaux de gris. Ce composant comprend plusieurs éléments interactifs tels que des graphiques, des points de données, des info-bulles et des boutons, avec une conception réactive à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="bg-gray-900 text-gray-100 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Sales Chart</h2>
    <div class="flex items-center justify-between mb-4">
        <span class="text-lg">Last 30 Days</span>
        <button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Weekly</button>
        <button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Monthly</button>
        <button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Yearly</button>
    </div>
    <div class="relative">
        <img src="https://picsum.photos/600/300" alt="Sales Chart" class="w-full rounded-lg">
        <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-gray-800 bg-opacity-50 rounded-lg">
            <span class="text-xl font-semibold">$23,000</span>
            <span class="text-sm">Total Sales</span>
        </div>
    </div>
    <div class="mt-4">
        <div class="flex justify-around text-sm text-gray-400">
            <div class="text-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
                <span>User 1</span>
            </div>
            <div class="text-center">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
                <span>User 2</span>
            </div>
            <div class="text-center">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
                <span>User 3</span>
            </div>
        </div>
    </div>
</div>

Graphique à barres en mode sombre

Graphique à barres réactif pour l’affichage des données avec prise en charge du mode sombre.

Ouvrir Aperçu

                <template>
  <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
    <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
      <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Sales Data</h2>
      <div class="relative h-60 lg:h-80">
        <!-- Bars -->
        <div class="absolute bottom-0 left-0 right-0 top-0 flex items-end justify-around px-4">
          <!-- Example bars - adjust height based on your data -->
          <div class="w-8 bg-blue-500 dark:bg-blue-600 rounded-t-lg h-3/4">
            <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">75%</span>
          </div>
          <div class="w-8 bg-green-500 dark:bg-green-600 rounded-t-lg h-2/3">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">66%</span>
          </div>
          <div class="w-8 bg-red-500 dark:bg-red-600 rounded-t-lg h-4/5">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">80%</span>
          </div>
          <div class="w-8 bg-yellow-500 dark:bg-yellow-600 rounded-t-lg h-1/2">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">50%</span>
          </div>
           <div class="w-8 bg-indigo-500 dark:bg-indigo-600 rounded-t-lg h-3/5">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">60%</span>
          </div>
           <div class="w-8 bg-purple-500 dark:bg-purple-600 rounded-t-lg h-2/4">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">50%</span>
          </div>
            <div class="w-8 bg-pink-500 dark:bg-pink-600 rounded-t-lg h-1/3">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">33%</span>
          </div>
        </div>
        <!-- X-axis Labels -->
        <div class="absolute bottom-0 left-0 right-0 h-8 flex items-center justify-around text-gray-600 dark:text-gray-400 text-sm">
          <span>Jan</span>
          <span>Feb</span>
          <span>Mar</span>
          <span>Apr</span>
          <span>May</span>
          <span>Jun</span>
          <span>Jul</span>
        </div>
      </div>
    </div>
  </div>
</template>

Composant Graphiques

Un composant de graphique simple et réactif avec des couleurs pastel et la prise en charge du mode sombre, conçu pour la consommation de blogs/contenus avec des micro-interactions subtiles via des effets de survol. Pas de JavaScript.

Ouvrir Aperçu

                <div class="container mx-auto p-4">
  <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
    <div class="flex flex-col space-y-4">
      <div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-blue-100 dark:bg-blue-700">
        <div class="text-sm font-medium text-blue-800 dark:text-blue-200">January</div>
        <div class="w-2/3 bg-blue-200 dark:bg-blue-600 rounded-full h-4">
          <div class="bg-blue-500 dark:bg-blue-400 h-4 rounded-full stunning-animation" style="width: 75%;"></div>
        </div>
        <div class="text-sm font-medium text-blue-800 dark:text-blue-200">75%</div>
      </div>
      <div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-green-100 dark:bg-green-700">
        <div class="text-sm font-medium text-green-800 dark:text-green-200">February</div>
        <div class="w-2/3 bg-green-200 dark:bg-green-600 rounded-full h-4">
          <div class="bg-green-500 dark:bg-green-400 h-4 rounded-full stunning-animation" style="width: 60%;"></div>
        </div>
        <div class="text-sm font-medium text-green-800 dark:text-green-200">60%</div>
      </div>
      <div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-purple-100 dark:bg-purple-700">
        <div class="text-sm font-medium text-purple-800 dark:text-purple-200">March</div>
        <div class="w-2/3 bg-purple-200 dark:bg-purple-600 rounded-full h-4">
          <div class="bg-purple-500 dark:bg-purple-400 h-4 rounded-full stunning-animation" style="width: 90%;"></div>
        </div>
        <div class="text-sm font-medium text-purple-800 dark:text-purple-200">90%</div>
      </div>
    </div>
  </div>
</div>

Composant Graphiques

Un composant de graphiques simple et minimaliste 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 p-4">
  <h2 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Sales Performance</h2>
  <div class="flex justify-between items-center mb-4">
    <div class="text-sm text-gray-500 dark:text-gray-400">Last 30 Days</div>
    <select class="text-sm text-gray-500 dark:text-gray-400 bg-transparent border-none">
      <option>Monthly</option>
      <option>Weekly</option>
      <option>Daily</option>
    </select>
  </div>
  <div class="h-40">
    <!-- Placeholder for chart -->
    <div class="flex items-end h-full">
      <div class="w-1/6 bg-blue-500 h-3/4 rounded-t dark:bg-blue-600"></div>
      <div class="w-1/6 bg-blue-500 h-2/4 rounded-t dark:bg-blue-600 ml-1"></div>
      <div class="w-1/6 bg-blue-500 h-1/4 rounded-t dark:bg-blue-600 ml-1"></div>
      <div class="w-1/6 bg-blue-500 h-full rounded-t dark:bg-blue-600 ml-1"></div>
      <div class="w-1/6 bg-blue-500 h-3/4 rounded-t dark:bg-blue-600 ml-1"></div>
      <div class="w-1/6 bg-blue-500 h-2/4 rounded-t dark:bg-blue-600 ml-1"></div>
    </div>
  </div>
</div>

Composant Graphiques

Un composant de graphiques réactif de style 3D avec prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="max-w-4xl mx-auto p-5 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl text-center font-bold mb-5 text-gray-900 dark:text-gray-100">3D Charts Component</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/200?random=1" alt="Chart Image 1" class="w-full h-32 object-cover rounded-b-lg">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chart 1</h3>
                <p class="text-gray-600 dark:text-gray-400">This is a description of chart 1 with some insightful data visualizations.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/200?random=2" alt="Chart Image 2" class="w-full h-32 object-cover rounded-b-lg">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chart 2</h3>
                <p class="text-gray-600 dark:text-gray-400">This is a description of chart 2 with engaging three-dimensional data models.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/200?random=3" alt="Chart Image 3" class="w-full h-32 object-cover rounded-b-lg">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chart 3</h3>
                <p class="text-gray-600 dark:text-gray-400">This is a description of chart 3 with innovative 3D elements.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/200?random=4" alt="Chart Image 4" class="w-full h-32 object-cover rounded-b-lg">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chart 4</h3>
                <p class="text-gray-600 dark:text-gray-400">This is a description of chart 4 that highlights key metrics.</p>
            </div>
        </div>
    </div>
    <div class="mt-5 text-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mx-auto mb-2">
        <p class="text-gray-700 dark:text-gray-300">Created by John Doe</p>
    </div>
</div>

RetroChartsComponent

Un composant de graphique rétro/vintage avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS. Comprend des images de remplacement.

Ouvrir Aperçu

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Sales Performance</h2>
  <div class="relative h-48">
    <!-- Placeholder SVG for chart - In a real application, this would be a charting library -->
    <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
      <path fill="#4B5563" d="M0,100 L0,80 C10,75 20,78 30,70 C40,65 50,68 60,60 C70,55 80,58 90,50 C100,45 100,100 Z" class="dark:fill-gray-700"></path>
      <path fill="#6B7280" d="M0,100 L0,85 C10,80 20,83 30,75 C40,70 50,73 60,65 C70,60 80,63 90,55 C100,50 100,100 Z" class="dark:fill-gray-600"></path>
    </svg>
    <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center text-gray-600 dark:text-gray-300 text-sm font-mono">Chart Data Not Available</div>
  </div>
  <div class="mt-4 flex justify-between text-gray-700 dark:text-gray-300 text-sm">
    <span>January</span>
    <span>February</span>
    <span>March</span>
    <span>April</span>
    <span>May</span>
  </div>
</div>