검색 구성 요소

카테고리

구성 요소 인포그래픽

인포그래픽

정보 또는 데이터의 시각적 표현

레트로인포그래픽컴포넌트

레트로/빈티지 디자인, 파스텔 색 구성표 및 다크 모드를 지원하는 반응형 인포그래픽 구성 요소입니다. 스타일링을 위해 Tailwind CSS를 사용하고 블로그 및 콘텐츠 소비에 적합한 복잡한 인터페이스를 위한 여러 대화형 요소를 포함합니다. 타임라인, 진행률 표시줄, 차트, 클릭 유도문안이 포함되어 있으며, 모두 80/90년대 미학과 파스텔 색상으로 꾸며져 있습니다. picsum.photos의 임의의 이미지를 사용하고 아바타에 randomuser.me 합니다.

열다 미리 보기

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

레트로 인포그래픽

다크 모드를 지원하는 포트폴리오를 위한 간단하고 반응이 빠른 레트로/빈티지 인포그래픽 구성 요소입니다. 보색 구성표와 최소한의 요소를 사용합니다.

열다 미리 보기

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

인포그래픽 구성 요소

소셜 미디어용으로 설계된 반응형 3D 인포그래픽 구성 요소로, 생생한 색상과 어두운 테마 지원을 통해 3차원 요소를 통합하여 깊이와 참여를 유도합니다.

열다 미리 보기

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

인포그래픽 구성 요소

3D 미학으로 디자인된 간단한 인포그래픽 구성 요소로, 소셜 미디어 인터페이스에 파스텔 색상을 사용하고 다크 모드를 지원합니다.

열다 미리 보기

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

인포그래픽 구성 요소

흙, 나무, 풍경에서 영감을 받은 흙색의 뉴모픽 인포그래픽 구성 요소입니다. 비즈니스/기업용으로 적당히 복잡한 소프트 UI 스타일이 특징입니다. 디자인은 반응형이며 Tailwind CSS를 사용하여 어두운 테마를 지원합니다.

열다 미리 보기

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

인포그래픽 구성 요소

뉴모피즘(Neumorphism) 스타일과 파스텔(Pastel) 색 구성표로 디자인된 간단한 인포그래픽 컴포넌트입니다. 프로필 카드와 기본 통계를 비즈니스 또는 기업 웹 사이트에 적합한 시각적으로 매력적인 레이아웃으로 표시합니다.

열다 미리 보기

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

인포그래픽 구성 요소

뉴모피즘 스타일, 그레이스케일 색 구성표, 심플 레이아웃, 대시보드용, 어두운 테마 지원으로 반응형 인포그래픽 구성 요소

열다 미리 보기

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

인포그래픽 구성 요소

3D 디자인 요소와 블로그/콘텐츠 사용을 위한 유사한 색 구성표가 있는 간단하고 반응이 빠른 인포그래픽 구성 요소입니다. 여기에는 Tailwind CSS를 사용하는 어두운 테마 지원이 포함됩니다.

열다 미리 보기

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

인포그래픽 구성 요소

어두운 테마를 지원하는 Tailwind CSS를 사용하여 스큐어모픽 스타일로 디자인된 반응형 인포그래픽 구성 요소입니다. 정보를 시각적으로 표시하기 위해 실제 요소를 모방합니다.

열다 미리 보기

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

인포그래픽 구성 요소

브루탈리즘 스타일, 고대비, 특이한 레이아웃, 테일윈드 CSS를 사용한 다크 모드 지원으로 반응하는 인포그래픽 구성 요소

열다 미리 보기

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