IconTabs icon

---
// IconTabs, recovered from blurr-components.pages.dev
---

<div class="itabs-wrap">  <input class="itabs-radio" type="radio" name="itabs" id="itab-0" checked>  <input class="itabs-radio" type="radio" name="itabs" id="itab-1">  <input class="itabs-radio" type="radio" name="itabs" id="itab-2">  <input class="itabs-radio" type="radio" name="itabs" id="itab-3">  <div class="itabs-bar"> <label class="itabs-label" for="itab-0"> <span class="itabs-icon">→</span> <span class="itabs-text">Strategie</span> </label><label class="itabs-label" for="itab-1"> <span class="itabs-icon"></span> <span class="itabs-text">Advertenties</span> </label><label class="itabs-label" for="itab-2"> <span class="itabs-icon">→</span> <span class="itabs-text">SEO</span> </label><label class="itabs-label" for="itab-3"> <span class="itabs-icon">→</span> <span class="itabs-text">Rapportage</span> </label> </div> <div class="itabs-panels"> <div class="itabs-panel itabs-panel--0"> <p>We starten met een diepgaande analyse van jouw markt en doelgroep. Op basis hiervan bouwen we een strategie die aansluit op jouw groeifase, met duidelijke prioriteiten en meetbare doelen.</p> </div><div class="itabs-panel itabs-panel--1"> <p>Wij beheren jouw betaalde kanalen op Google, Meta en LinkedIn. Van campagne-opzet tot dagelijkse optimalisatie, we zorgen dat elk budgeteuro zo hard mogelijk werkt.</p> </div><div class="itabs-panel itabs-panel--2"> <p>Organisch groeien begint met een sterke technische basis. We combineren technische SEO, contentstrategie en linkbuilding voor duurzame, kostenefficiënte groei in zoekresultaten.</p> </div><div class="itabs-panel itabs-panel--3"> <p>Elke maand ontvang je een helder rapport met de resultaten, inzichten en aanbevelingen voor de volgende periode. Geen spreadsheets maar concrete conclusies.</p> </div> </div> </div>

<style>
.itabs-wrap{--color-accent: #6366f1;--color-primary: #0a0a0a;font-family:system-ui,sans-serif;max-width:680px}
.itabs-radio{display:none}
.itabs-bar{display:flex;border-bottom:2px solid #e5e7eb;gap:0}
.itabs-label{display:flex;align-items:center;gap:8px;padding:12px 20px;cursor:pointer;font-size:.875rem;font-weight:600;color:#6b7280;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s;white-space:nowrap}
.itabs-label:hover{color:var(--color-primary)}
.itabs-icon{font-size:1rem}
.itabs-panels{padding:24px 0}
.itabs-panel{display:none;font-size:.925rem;line-height:1.7;color:#374151}
.itabs-panel p{margin:0}
#itab-0:checked~.itabs-bar label[for=itab-0],#itab-1:checked~.itabs-bar label[for=itab-1],#itab-2:checked~.itabs-bar label[for=itab-2],#itab-3:checked~.itabs-bar label[for=itab-3]{color:var(--color-accent);border-bottom-color:var(--color-accent)}
#itab-0:checked~.itabs-panels .itabs-panel--0,#itab-1:checked~.itabs-panels .itabs-panel--1,#itab-2:checked~.itabs-panels .itabs-panel--2,#itab-3:checked~.itabs-panels .itabs-panel--3{display:block;animation:itabs-fade .2s ease}
</style>