Komponenten suchen

Kategorien

Komponenten Infografiken

Infografiken

Visuelle Darstellungen von Informationen oder Daten

RetroInfografikenKomponente

Eine reaktionsschnelle Infografik-Komponente mit Retro-/Vintage-Design, pastellfarbenem Farbschema und Unterstützung für den Dunkelmodus. Verwendet Tailwind CSS für das Styling und enthält mehrere interaktive Elemente für eine komplexe Benutzeroberfläche, die für Blogs und den Konsum von Inhalten geeignet ist. Enthält eine Zeitleiste, Fortschrittsbalken, Diagramme und einen Call-to-Action, alles im Stil der 80er/90er Jahre und Pastellfarben. Verwendet zufällige Bilder von picsum.photos und randomuser.me für Avatare.

Offen Vorschau

                <div class="bg-gradient-to-b from-pink-200 to-purple-200 dark:from-gray-800 dark:to-gray-900 min-h-screen p-8 font-mono">
  <div class="container mx-auto">
    <h1 class="text-4xl text-center text-gray-800 dark:text-white mb-12 uppercase tracking-wide">Digital Voyage: An Infographic</h1>

    </div>

  </div>
</div>

Retro-Infografik

Eine einfache, reaktionsschnelle Retro-/Vintage-Infografik-Komponente für Portfolios mit Unterstützung des Dunkelmodus. Verwendet ein komplementäres Farbschema und minimale Elemente.

Offen Vorschau

                <div class="bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-6 md:p-12 font-sans">
  <div class="max-w-4xl mx-auto">
    <h2 class="text-2xl md:text-3xl font-bold text-center mb-8">My Infographic</h2>
    
    <div class="flex flex-wrap -mx-4">
      
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6">
          <h3 class="text-xl font-semibold mb-4">Project Alpha</h3>
          <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project Alpha and its key features.</p>
          <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar of user">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-gray-100 leading-none">John Smith</p>
              <p class="text-gray-600 dark:text-gray-400">Developer</p>
            </div>
          </div>
        </div>
      </div>
      
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6">
          <h3 class="text-xl font-semibold mb-4">Project Beta</h3>
          <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project Beta and its key features.</p>
          <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/76.jpg" alt="Avatar of user">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-gray-100 leading-none">Jane Doe</p>
              <p class="text-gray-600 dark:text-gray-400">Designer</p>
            </div>
          </div>
        </div>
      </div>
      
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6">
          <h3 class="text-xl font-semibold mb-4">Project Gamma</h3>
          <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project Gamma and its key features.</p>
          <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/77.jpg" alt="Avatar of user">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-gray-100 leading-none">Peter Jones</p>
              <p class="text-gray-600 dark:text-gray-400">Project Manager</p>
            </div>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</div>

Infografik-Komponente

Eine reaktionsschnelle 3D-Infografik-Komponente, die für Social-Media-Schnittstellen mit lebendigen Farben und Unterstützung für dunkle Themen entwickelt wurde und dreidimensionale Elemente für Tiefe und Engagement enthält.

Offen Vorschau

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-lg mx-auto">
    <div class="text-center mb-4">
        <h2 class="text-3xl font-bold">Infographic Title</h2>
        <p class="text-gray-400">Engaging insights and data visualizations</p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gradient-to-r from-purple-500 to-blue-500 p-4 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105"> 
            <h3 class="font-semibold text-xl">Key Insight #1</h3>
            <img src="https://picsum.photos/id/1018/400/300" alt="Infographic" class="rounded-lg my-2 shadow-md"/>
            <p class="text-gray-200">Details about the first key insight go here. It should be engaging and informative.</p>
        </div>
        <div class="bg-gradient-to-r from-green-400 to-teal-500 p-4 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105">
            <h3 class="font-semibold text-xl">Key Insight #2</h3>
            <img src="https://picsum.photos/id/1015/400/300" alt="Infographic" class="rounded-lg my-2 shadow-md"/>
            <p class="text-gray-200">Details about the second key insight go here. Make it intriguing!</p>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold">Join the Conversation</h3>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <input type="text" placeholder="Share your thoughts..." class="bg-gray-700 text-white rounded-full py-2 px-4 w-full" />
        </div>
        <button class="mt-2 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full inline-flex items-center">Submit</button>
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-gray-800 {
        background-color: #1c1c1c;
    }
    .bg-gradient-to-r {
        background-image: linear-gradient(to right, #6a0dad, #1e90ff);
    }
}
</style>

Infografik-Komponente

Eine einfache Infografik-Komponente, die mit einer 3D-Ästhetik gestaltet wurde, Pastellfarben für Social-Media-Schnittstellen verwendet und den Dunkelmodus unterstützt.

Offen Vorschau

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md mx-auto">
  <h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-gray-200">Infographics</h2>
  <div class="mt-4 flex flex-col items-center">
    <div class="bg-blue-200 dark:bg-blue-700 rounded-full w-24 h-24 flex items-center justify-center shadow-inner">
      <img src="https://picsum.photos/100/100" alt="Random Image" class="rounded-full object-cover">
    </div>
    <p class="mt-2 text-lg text-gray-700 dark:text-gray-300">Engaging 3D Design</p>
  </div>
  <div class="mt-4 flex justify-between">
    <div class="bg-green-200 dark:bg-green-700 rounded-lg p-4 shadow-md w-1/4">
      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Stat 1</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400">Details about Stat 1</p>
    </div>
    <div class="bg-yellow-200 dark:bg-yellow-700 rounded-lg p-4 shadow-md w-1/4">
      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Stat 2</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400">Details about Stat 2</p>
    </div>
    <div class="bg-pink-200 dark:bg-pink-700 rounded-lg p-4 shadow-md w-1/4">
      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Stat 3</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400">Details about Stat 3</p>
    </div>
  </div>
  <div class="mt-4">
    <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">User Info</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">
      <p class="ml-2 text-gray-700 dark:text-gray-300">John Doe</p>
    </div>
  </div>
</div>

Infografik-Komponente

Eine neumorphe Infografik-Komponente mit Erdtönen, die von Erde, Bäumen und Landschaften inspiriert sind. Es verfügt über einen weichen UI-Stil mit moderater Komplexität für den Business-/Corporate-Gebrauch. Das Design ist responsive und unterstützt dunkle Designs mit Tailwind CSS.

Offen Vorschau

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md relative overflow-hidden">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Business Overview</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-6">An overview of the current business landscape and insights into market trends.</p>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-inner">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Sales Data</h3>
            <img src="https://picsum.photos/200/100" alt="Sales Data Image" class="rounded-lg my-2">
            <p class="text-gray-600 dark:text-gray-400">Current month sales: 2500 units</p>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-inner">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Customer Growth</h3>
            <img src="https://picsum.photos/200/100?random=1" alt="Customer Growth Image" class="rounded-lg my-2">
            <p class="text-gray-600 dark:text-gray-400">Growth rate: 15% YoY</p>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-inner">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Market Trends</h3>
            <img src="https://picsum.photos/200/100?random=2" alt="Market Trends Image" class="rounded-lg my-2">
            <p class="text-gray-600 dark:text-gray-400">Emerging trends in the industry.</p>
        </div>
    </div>
    <div class="mt-6">
        <h4 class="font-semibold text-gray-800 dark:text-gray-200">Team Members</h4>
        <div class="flex space-x-4 mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Team Member" class="w-12 h-12 rounded-full shadow-inner">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Team Member" class="w-12 h-12 rounded-full shadow-inner">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Team Member" class="w-12 h-12 rounded-full shadow-inner">
        </div>
    </div>
</div>

Infografik-Komponente

Eine einfache Infografik-Komponente, die im Neumorphism-Stil und einem Pastell-Farbschema gestaltet ist. Es zeigt eine Profilkarte und grundlegende Statistiken in einem optisch ansprechenden Layout an, das für Unternehmens- oder Unternehmenswebsites geeignet ist.

Offen Vorschau

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md flex flex-col items-center">
    <div class="bg-white dark:bg-gray-700 p-4 rounded-full shadow-lg mb-4">
        <img src="https://picsum.photos/80/80" alt="Infographic Image" class="rounded-full">
    </div>
    <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">CEO, Company XYZ</p>
    <div class="mt-4 flex justify-between w-full">
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg text-center">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Projects</h3>
            <p class="text-2xl font-bold text-gray-800 dark:text-gray-200">120</p>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg text-center">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Clients</h3>
            <p class="text-2xl font-bold text-gray-800 dark:text-gray-200">80</p>
        </div>
    </div>
    <div class="mt-4 bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg w-full text-center">
        <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Satisfaction Rate</h3>
        <p class="text-2xl font-bold text-gray-800 dark:text-gray-200">95%</p>
    </div>
</div>

Infografik-Komponente

Infografik-Komponente mit Neumorphismus-Stil, Graustufen-Farbschema, einfaches Layout, für Dashboard-Zwecke, reaktionsschnell mit Unterstützung für dunkles Design

Offen Vorschau

                <div class="p-4 md:p-8 bg-gray-200 dark:bg-gray-800 antialiased font-sans">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Card 1 -->
    <div class="rounded-lg p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
      <div class="text-gray-700 dark:text-gray-300 mb-4">
        <h3 class="text-lg font-semibold mb-2">Total Users</h3>
        <p class="text-3xl font-bold">15,250</p>
      </div>
      <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>Since last month</span>
        <span class="text-green-500 dark:text-green-400">+ 5.2%</span>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="rounded-lg p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
      <div class="text-gray-700 dark:text-gray-300 mb-4">
        <h3 class="text-lg font-semibold mb-2">Revenue</h3>
        <p class="text-3xl font-bold">$150,000</p>
      </div>
      <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>Since last month</span>
        <span class="text-green-500 dark:text-green-400">+ 8.1%</span>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="rounded-lg p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
      <div class="text-gray-700 dark:text-gray-300 mb-4">
        <h3 class="text-lg font-semibold mb-2">New Orders</h3>
        <p class="text-3xl font-bold">750</p>
      </div>
      <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>Since last month</span>
        <span class="text-red-500 dark:text-red-400">- 2.5%</span>
      </div>
    </div>
  </div>

  <!-- Include custom shadow styles for Neumorphism -->
  <style>
    .shadow-neumorphism-light {
      box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
    }
    .dark .shadow-neumorphism-dark {
      box-shadow: 7px 7px 15px #444444, -7px -7px 15px #666666;
    }
  </style>
</div>

Infografik-Komponente

Eine einfache, reaktionsschnelle Infografik-Komponente mit 3D-Designelementen und einem analogen Farbschema für die Verwendung von Blogs / Inhalten. Es enthält Unterstützung für dunkle Themen mit Tailwind CSS.

Offen Vorschau

                <div class="container mx-auto p-6 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <div class="relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-pink-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
      <div class="relative z-10">
        <h2 class="text-2xl font-bold mb-4">Key Statistic 1</h2>
        <p class="text-gray-700 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>
    </div>

    <div class="relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-green-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
      <div class="relative z-10">
        <h2 class="text-2xl font-bold mb-4">Key Statistic 2</h2>
        <p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>

  <div class="mt-8 relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
    <div class="absolute inset-0 bg-gradient-to-br from-yellow-400 to-red-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
    <div class="relative z-10">
      <h2 class="text-2xl font-bold mb-4">Key Finding</h2>
      <p class="text-gray-700 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
  </div>
</div>

Infografik-Komponente

Eine reaktionsschnelle Infografik-Komponente, die in einem skeuomorphen Stil unter Verwendung von Tailwind CSS mit Unterstützung für dunkle Themen entworfen wurde. Es ahmt reale Elemente nach, um Informationen visuell darzustellen.

Offen Vorschau

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 mb-6 w-full max-w-4xl">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Infographics</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-xl transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/id/1011/400/300" alt="Infographic 1" class="w-full h-32 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Metric 1</h3>
        <p class="text-gray-600 dark:text-gray-400">Description and details about the first metric displayed in a visually appealing way.</p>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-xl transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/id/1012/400/300" alt="Infographic 2" class="w-full h-32 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Metric 2</h3>
        <p class="text-gray-600 dark:text-gray-400">Description and details about the second metric, designed to be intuitive.</p>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-xl transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/id/1013/400/300" alt="Infographic 3" class="w-full h-32 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Metric 3</h3>
        <p class="text-gray-600 dark:text-gray-400">Insights and information about the third metric, presented in an engaging manner.</p>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-xl transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/id/1014/400/300" alt="Infographic 4" class="w-full h-32 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Metric 4</h3>
        <p class="text-gray-600 dark:text-gray-400">Detailed information about the fourth metric, with a visual twist.</p>
      </div>
    </div>
  </div>
</div>

Infografik-Komponente

Infografik-Komponente im Brutalismus-Stil, hoher Kontrast, ungewöhnliches Layout, reaktionsschnell mit Unterstützung des Dunkelmodus mit Rückenwind-CSS

Offen Vorschau

                <section class="bg-white dark:bg-stone-900 text-stone-900 dark:text-white p-8 sm:p-12 md:p-16 lg:p-20 font-mono">
  <div class="container mx-auto">
    <h2 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-12 uppercase border-b-8 border-stone-900 dark:border-white pb-4">Infographic Insights</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:scale-105">
        <h3 class="text-2xl font-bold mb-4 uppercase">Data Point 1</h3>
        <p class="text-lg mb-4">Quis at aute sint partem non, sed literis minim ea.</p>
        <div class="text-5xl font-bold text-right text-red-700 dark:text-yellow-400">123</div>
      </div>
      <div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:scale-105">
        <h3 class="text-2xl font-bold mb-4 uppercase">Data Point 2</h3>
        <p class="text-lg mb-4">Esse cillum fore consequat, nam magna tempor a fore quam.</p>
        <div class="text-5xl font-bold text-right text-red-700 dark:text-yellow-400">45%</div>
      </div>
      <div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:scale-105">
        <h3 class="text-2xl font-bold mb-4 uppercase">Data Point 3</h3>
        <p class="text-lg mb-4">Do eu lorem ne nescius, ex ut laboris constructio.</p>
        <div class="text-5xl font-bold text-right text-red-700 dark:text-yellow-400">$999</div>
      </div>
    </div>
    <div class="mt-12 grid grid-cols-1 lg:grid-cols-2 gap-8">
        <div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white flex items-center transform transition-transform duration-300 hover:rotate-2">
            <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Avatar" class="w-16 h-16 rounded-none mr-6 border-4 border-stone-900 dark:border-white">
            <div>
                <h3 class="text-2xl font-bold mb-2 uppercase">Key Stat with Image</h3>
                <p class="text-lg">Non pariatur quae ne amet, admodum non expetendis.</p>
                 <div class="text-5xl font-bold text-left text-red-700 dark:text-yellow-400 mt-4">7890</div>
            </div>
        </div>
         <div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:-rotate-2">
            <h3 class="text-2xl font-bold mb-4 uppercase">Image Highlight</h3>
            <img src="https://picsum.photos/id/237/400/250" alt="Placeholder Image" class="w-full h-64 object-cover border-4 border-stone-900 dark:border-white mb-4">
            <p class="text-lg">Id sint singulis aut ullamco. lorem nescius aut cupidatat.</p>
        </div>
    </div>
     <div class="mt-12 bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white overflow-x-auto">
        <h3 class="text-2xl font-bold mb-4 uppercase">Scrolling Data</h3>
        <div class="flex space-x-8">
            <div class="flex-none w-64">
                <div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">1024</div>
                <p class="text-lg">Specific insight one</p>
            </div>
             <div class="flex-none w-64">
                <div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">2048</div>
                <p class="text-lg">Specific insight two</p>
            </div>
             <div class="flex-none w-64">
                <div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">4096</div>
                <p class="text-lg">Specific insight three</p>
            </div>
             <div class="flex-none w-64">
                <div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">8192</div>
                <p class="text-lg">Specific insight four</p>
            </div>
        </div>
    </div>
  </div>
</section>