Responsive Skill Cards Grid

<div class="">
      <h3 class="text-sm font-semibold text-gray-900 mb-3 flex items-center gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-gray-600"><polyline points="16 18 22 12 16 6" class=""></polyline><polyline points="8 6 2 12 8 18" class=""></polyline></svg>
        Frontend Development
      </h3>
      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
        <div class="rounded-xl border border-black/5 bg-white px-3 py-2.5 text-sm">
          <div class="font-medium">React</div>
          <div class="text-xs text-gray-500 mt-0.5">Expert</div>
        </div>
        <div class="rounded-xl border border-black/5 bg-white px-3 py-2.5 text-sm">
          <div class="font-medium">TypeScript</div>
          <div class="text-xs text-gray-500 mt-0.5">Advanced</div>
        </div>
        <div class="rounded-xl border border-black/5 bg-white px-3 py-2.5 text-sm">
          <div class="font-medium">Next.js</div>
          <div class="text-xs text-gray-500 mt-0.5">Advanced</div>
        </div>
        <div class="rounded-xl border border-black/5 bg-white px-3 py-2.5 text-sm">
          <div class="font-medium">HTML/CSS</div>
          <div class="text-xs text-gray-500 mt-0.5">Expert</div>
        </div>
        <div class="rounded-xl border border-black/5 bg-white px-3 py-2.5 text-sm">
          <div class="font-medium">Tailwind CSS</div>
          <div class="text-xs text-gray-500 mt-0.5">Expert</div>
        </div>
        <div class="rounded-xl border border-black/5 bg-white px-3 py-2.5 text-sm">
          <div class="font-medium">Framer Motion</div>
          <div class="text-xs text-gray-500 mt-0.5">Advanced</div>
        </div>
      </div>
    </div>