検索履歴パネル

<div class="d03-15-04-search">
          <input type="text" class="d03-15-04-input" placeholder="検索窓をクリック" aria-label="検索">
          <div class="d03-15-04-panel">
            <p class="d03-15-04-h">最近の検索</p>
            <ul class="d03-15-04-list"></ul>
          </div>
        </div>

.prev.d03-15-04{align-items:flex-start}
        .d03-15-04-search{position:relative;width:100%;max-width:300px;margin:0 auto}
        .d03-15-04-input{width:100%;box-sizing:border-box;padding:10px 13px;border:1.5px solid #e5e7eb;border-radius:11px;font-size:13.5px;color:#1f2937;outline:none}
        .d03-15-04-input:focus{border-color:#a5b4fc}
        .d03-15-04-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 12px 28px rgba(30,41,59,.14);padding:8px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:.18s;z-index:6}
        .d03-15-04-search.open .d03-15-04-panel{opacity:1;visibility:visible;transform:translateY(0)}
        .d03-15-04-h{margin:2px 6px 4px;font-size:10.5px;font-weight:700;color:#94a3b8;text-transform:uppercase}
        .d03-15-04-list{list-style:none;margin:0;padding:0}
        .d03-15-04-list li{padding:7px 10px;border-radius:7px;font-size:12.5px;color:#374151;cursor:pointer}
        .d03-15-04-list li::before{content:"↩ ";color:#cbd5e1}
        .d03-15-04-list li:hover{background:#eef2ff;color:#4338ca}

(function(){
        var root=document.querySelector('.d03-15-04');if(!root)return;
        var box=root.querySelector('.d03-15-04-search');
        var input=root.querySelector('.d03-15-04-input');
        var list=root.querySelector('.d03-15-04-list');
        var history=['ロゴ制作 依頼','独自ドメイン 取得方法'];
        list.innerHTML=history.map(function(h){return '<li>'+h+'</li>';}).join('');
        input.addEventListener('focus',function(){box.classList.add('open');});
        document.addEventListener('click',function(e){if(!box.contains(e.target))box.classList.remove('open');});
        list.addEventListener('click',function(e){
          if(e.target.tagName==='LI'){input.value=e.target.textContent;box.classList.remove('open');}
        });
      })();