インフォグラフィックコンポーネント

<div class="bg-gray-900 text-gray-200 p-8 min-h-screen">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold text-center text-white mb-12">My Portfolio Infographics</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Project Stats Card -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-semibold text-white mb-4">Project Statistics</h2>
        <div class="flex items-center mb-4">
          <div class="text-gray-400 mr-2">Completed Projects:</div>
          <div class="text-white font-bold">50+</div>
        </div>
        <div class="flex items-center mb-4">
          <div class="text-gray-400 mr-2">Client Satisfaction:</div>
          <div class="text-white font-bold">100%</div>
        </div>
        <div class="flex items-center">
          <div class="text-gray-400 mr-2">Years of Experience:</div>
          <div class="text-white font-bold">10+</div>
        </div>
      </div>

      <!-- Skills Distribution Card -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-semibold text-white mb-4">Skills Distribution</h2>
        <div class="mb-4">
          <div class="flex justify-between text-gray-400 mb-1"><span>HTML/CSS</span><span>95%</span></div>
          <div class="w-full bg-gray-700 rounded-full h-2 dark:bg-gray-700">
            <div class="bg-gray-400 h-2 rounded-full" style="width: 95%"></div>
          </div>
        </div>
        <div class="mb-4">
          <div class="flex justify-between text-gray-400 mb-1"><span>JavaScript</span><span>85%</span></div>
          <div class="w-full bg-gray-700 rounded-full h-2 dark:bg-gray-700">
            <div class="bg-gray-400 h-2 rounded-full" style="width: 85%"></div>
          </div>
        </div>
        <div class="mb-4">
          <div class="flex justify-between text-gray-400 mb-1"><span>Tailwind CSS</span><span>90%</span></div>
          <div class="w-full bg-gray-700 rounded-full h-2 dark:bg-gray-700">
            <div class="bg-gray-400 h-2 rounded-full" style="width: 90%"></div>
          </div>
        </div>
        <div>
          <div class="flex justify-between text-gray-400 mb-1"><span>Python</span><span>70%</span></div>
          <div class="w-full bg-gray-700 rounded-full h-2 dark:bg-gray-700">
            <div class="bg-gray-400 h-2 rounded-full" style="width: 70%"></div>
          </div>
        </div>
      </div>

      <!-- Testimonials Card -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-semibold text-white mb-4">Client Testimonials</h2>
        <div class="mb-4 border-b border-gray-700 pb-4">
          <p class="text-gray-400 italic mb-2">"Outstanding work! Exceeded expectations and delivered on time."</p>
          <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client Avatar">
            <div class="text-white font-semibold">John Smith</div>
          </div>
        </div>
        <div>
          <p class="text-gray-400 italic mb-2">"Highly recommend for any web development project. Great communication."</p>
          <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client Avatar">
            <div class="text-white font-semibold">Jane Doe</div>
          </div>
        </div>
      </div>

      <!-- Project Showcase Card -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6 md:col-span-2 lg:col-span-3">
        <h2 class="text-2xl font-semibold text-white mb-4">Featured Projects</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <div class="relative overflow-hidden rounded-lg">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project1/400/300" alt="Project Image 1">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
              <p class="text-white text-xl font-bold">Project Alpha</p>
            </div>
          </div>
          <div class="relative overflow-hidden rounded-lg">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project2/400/300" alt="Project Image 2">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
              <p class="text-white text-xl font-bold">Project Beta</p>
            </div>
          </div>
          <div class="relative overflow-hidden rounded-lg">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project3/400/300" alt="Project Image 3">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
              <p class="text-white text-xl font-bold">Project Gamma</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>