人気キーワードタグクラウド付き検索パネル

<div class="d03-16-06-stage">
          <div class="d03-16-06-bar">
            <svg viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="#94a3b8" stroke-width="1.8"><circle cx="8.5" cy="8.5" r="5.5"/><path d="M17 17l-4-4"/></svg>
            <span class="d03-16-06-text">検索キーワードを入力</span>
          </div>
          <div class="d03-16-06-drop">
            <p class="d03-16-06-cat">人気キーワード</p>
            <div class="d03-16-06-cloud">
              <span class="d03-16-06-tag">福袋</span>
              <span class="d03-16-06-tag">アウター</span>
              <span class="d03-16-06-tag">母の日ギフト</span>
              <span class="d03-16-06-tag">タイムセール</span>
              <span class="d03-16-06-tag">新生活</span>
              <span class="d03-16-06-tag">在庫処分</span>
            </div>
          </div>
        </div>

.prev.d03-16-06{padding:0;display:block}
        .d03-16-06-stage{
          width:100%;height:100%;min-height:260px;box-sizing:border-box;
          background:#f1f5f9;padding:24px;position:relative;
        }
        .d03-16-06-bar{
          display:flex;align-items:center;gap:9px;background:#fff;border-radius:10px;
          border:1px solid #cbd5e1;padding:11px 14px;box-shadow:0 1px 2px rgba(0,0,0,.04);
        }
        .d03-16-06-text{font-size:12.5px;color:#94a3b8;font-weight:600}
        .d03-16-06-drop{
          position:absolute;left:24px;right:24px;top:66px;
          background:#fff;border-radius:10px;border:1px solid #e2e8f0;
          box-shadow:0 10px 24px rgba(15,23,42,.1);padding:14px;
        }
        .d03-16-06-cat{
          margin:0 0 10px;font-size:10px;font-weight:800;color:#94a3b8;
          text-transform:uppercase;letter-spacing:.05em;
        }
        .d03-16-06-cloud{display:flex;flex-wrap:wrap;gap:8px}
        .d03-16-06-tag{
          font-size:11.5px;font-weight:600;color:#2563eb;background:#eff6ff;
          padding:6px 12px;border-radius:99px;
        }