{"id":24287,"date":"2026-05-04T11:47:23","date_gmt":"2026-05-04T03:47:23","guid":{"rendered":"https:\/\/cardpromo-staging.com\/card-promotions\/?page_id=24287"},"modified":"2026-05-04T12:08:39","modified_gmt":"2026-05-04T04:08:39","slug":"tabmenu","status":"publish","type":"page","link":"https:\/\/cardpromo-staging.com\/card-promotions\/tabmenu\/","title":{"rendered":"tabmenu"},"content":{"rendered":"<style>body{margin:0;padding:2rem;font-family:system-ui,sans-serif;background:#f9f9f7;color:#1a1a1a}.tab-radio{display:none}.tabs{max-width:640px;margin:0 auto}.tab-labels{display:flex;border-bottom:1.5px solid #e0dfd8}.tab-label{padding:10px 22px;font-size:14px;font-weight:500;color:#888780;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1.5px;transition:color .15s,border-color .15s;user-select:none}.tab-label:hover{color:#1a1a1a}.tab-panel{display:none;padding:1.5rem .25rem;animation:fadein .2s ease}@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.tab-panel h3{font-size:15px;font-weight:500;margin:0 0 8px}.tab-panel p{font-size:14px;color:#5f5e5a;line-height:1.65;margin:0 0 1rem}#tab1:checked~.tab-labels label[for=tab1],#tab2:checked~.tab-labels label[for=tab2],#tab3:checked~.tab-labels label[for=tab3],#tab4:checked~.tab-labels label[for=tab4]{color:#1a1a1a;border-bottom-color:#534AB7}#tab1:checked~.tab-panels #panel1,#tab2:checked~.tab-panels #panel2,#tab3:checked~.tab-panels #panel3,#tab4:checked~.tab-panels #panel4{display:block}.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:.5rem}.chip{font-size:12px;font-weight:500;padding:4px 12px;border-radius:8px}.chip.teal{background:#E1F5EE;color:#0F6E56}.chip.blue{background:#E6F1FB;color:#185FA5}.chip.amber{background:#FAEEDA;color:#854F0B}.chip.coral{background:#FAECE7;color:#993C1D}.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:.5rem}.stat{background:#f1efe8;border-radius:8px;padding:12px 14px}.stat-val{font-size:22px;font-weight:500}.stat-lbl{font-size:12px;color:#888780;margin-top:2px}.list{list-style:none;padding:0;margin:0}.list li{font-size:14px;color:#5f5e5a;padding:9px 0;border-bottom:.5px solid #e0dfd8;display:flex;align-items:center;gap:8px}.list li:last-child{border-bottom:none}.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.dot.green{background:#639922}.dot.amber{background:#BA7517}.dot.red{background:#E24B4A}<\/style>\n<div class=\"tabs\"><input class=\"tab-radio\" type=\"radio\" name=\"tabs\" id=\"tab1\" checked> <input class=\"tab-radio\" type=\"radio\" name=\"tabs\" id=\"tab2\"> <input class=\"tab-radio\" type=\"radio\" name=\"tabs\" id=\"tab3\"> <input class=\"tab-radio\" type=\"radio\" name=\"tabs\" id=\"tab4\"><\/p>\n<div class=\"tab-labels\"><label class=\"tab-label\" for=\"tab1\">Overview<\/label><label class=\"tab-label\" for=\"tab2\">Stats<\/label><label class=\"tab-label\" for=\"tab3\">Skills<\/label><label class=\"tab-label\" for=\"tab4\">Activity<\/label><\/div>\n<div class=\"tab-panels\">\n<div class=\"tab-panel\" id=\"panel1\">\n<h3>About this project<\/h3>\n<p>A fully CSS-driven tab component \u2014 no JavaScript involved. It uses hidden radio inputs paired with label elements. When a label is clicked, its linked radio becomes :checked, and CSS sibling selectors reveal the matching panel.<\/p>\n<p>Works in all modern browsers and degrades gracefully. Fully keyboard accessible via Tab + arrow keys.<\/p>\n<\/div>\n<div class=\"tab-panel\" id=\"panel2\">\n<h3>Key numbers<\/h3>\n<div class=\"stat-row\">\n<div class=\"stat\">\n<div class=\"stat-val\">0<\/div>\n<div class=\"stat-lbl\">Lines of JS<\/div>\n<\/div>\n<div class=\"stat\">\n<div class=\"stat-val\">4<\/div>\n<div class=\"stat-lbl\">Tabs<\/div>\n<\/div>\n<div class=\"stat\">\n<div class=\"stat-val\">100%<\/div>\n<div class=\"stat-lbl\">CSS powered<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"tab-panel\" id=\"panel3\">\n<h3>Techniques used<\/h3>\n<div class=\"chip-row\"><span class=\"chip teal\">:checked selector<\/span> <span class=\"chip blue\">~ sibling combinator<\/span> <span class=\"chip amber\">radio inputs<\/span> <span class=\"chip coral\">CSS animation<\/span><\/div>\n<\/div>\n<div class=\"tab-panel\" id=\"panel4\">\n<h3>Compatibility<\/h3>\n<ul class=\"list\">\n<li><span class=\"dot green\"><\/span> Chrome \/ Edge \u2014 full support<\/li>\n<li><span class=\"dot green\"><\/span> Firefox \u2014 full support<\/li>\n<li><span class=\"dot green\"><\/span> Safari \u2014 full support<\/li>\n<li><span class=\"dot amber\"><\/span> IE 11 \u2014 partial (no animation)<\/li>\n<li><span class=\"dot red\"><\/span> IE 9 and below \u2014 unsupported<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>OverviewStatsSkillsActivity About this project A fully CSS-driven tab component \u2014 no JavaScript involved. It uses hidden radio inputs paired with label elements. When a label is clicked, its linked radio becomes :checked, and CSS sibling selectors reveal the matching panel. Works in all modern browsers and degrades gracefully. Fully keyboard accessible via Tab + arrow [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"acf":[],"_links":{"self":[{"href":"https:\/\/cardpromo-staging.com\/card-promotions\/wp-json\/wp\/v2\/pages\/24287"}],"collection":[{"href":"https:\/\/cardpromo-staging.com\/card-promotions\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cardpromo-staging.com\/card-promotions\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cardpromo-staging.com\/card-promotions\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/cardpromo-staging.com\/card-promotions\/wp-json\/wp\/v2\/comments?post=24287"}],"version-history":[{"count":3,"href":"https:\/\/cardpromo-staging.com\/card-promotions\/wp-json\/wp\/v2\/pages\/24287\/revisions"}],"predecessor-version":[{"id":24292,"href":"https:\/\/cardpromo-staging.com\/card-promotions\/wp-json\/wp\/v2\/pages\/24287\/revisions\/24292"}],"wp:attachment":[{"href":"https:\/\/cardpromo-staging.com\/card-promotions\/wp-json\/wp\/v2\/media?parent=24287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}