Quick Action Button Grid

<div class="quick-action-grid">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');</style>
  <div class="grid grid-cols-4 gap-2">
    <button class="p-3 rounded-xl bg-gradient-to-b from-cyan-400/10 to-cyan-400/5 border border-cyan-400/20 flex flex-col items-center gap-1.5 hover:border-cyan-400/30 transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-cyan-400">
        <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
        <circle cx="9" cy="9" r="2"></circle>
        <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
      </svg>
      <span class="text-xs text-cyan-400" style="font-family: 'Inter', sans-serif;">Image</span>
    </button>
    <button class="p-3 rounded-xl bg-gradient-to-b from-blue-400/10 to-blue-400/5 border border-blue-400/20 flex flex-col items-center gap-1.5 hover:border-blue-400/30 transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-blue-400">
        <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
        <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
        <path d="M10 9H8"></path>
        <path d="M16 13H8"></path>
        <path d="M16 17H8"></path>
      </svg>
      <span class="text-xs text-blue-400" style="font-family: 'Inter', sans-serif;">Text</span>
    </button>
    <button class="p-3 rounded-xl bg-gradient-to-b from-sky-400/10 to-sky-400/5 border border-sky-400/20 flex flex-col items-center gap-1.5 hover:border-sky-400/30 transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-sky-400">
        <path d="m16 18 6-6-6-6"></path>
        <path d="m8 6-6 6 6 6"></path>
      </svg>
      <span class="text-xs text-sky-400" style="font-family: 'Inter', sans-serif;">Code</span>
    </button>
    <button class="p-3 rounded-xl bg-gradient-to-b from-indigo-400/10 to-indigo-400/5 border border-indigo-400/20 flex flex-col items-center gap-1.5 hover:border-indigo-400/30 transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-indigo-400">
        <path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path>
        <path d="M9 18h6"></path>
        <path d="M10 22h4"></path>
      </svg>
      <span class="text-xs text-indigo-400" style="font-family: 'Inter', sans-serif;">Ideas</span>
    </button>
  </div>
</div>