Problem description

Given HTML markup with hidden radio inputs for each tab, a .tab-labels container of <label> elements linked via for, and a .tab-content container with panel <div>s, write CSS to:

• Hide native radio inputs.

• Style .tab-labels label as glassy tab buttons arranged horizontally.

• Use input:checked ~ .tab-labels label[for="..."] to highlight the active tab with an underline transition.

• Show only the active panel in .tab-content based on the checked input via sibling selectors.

• Ensure the layout is responsive (tabs flex-wrap on narrow screens).

Goal

Write CSS rules leveraging the radio-button hack, sibling selectors, flexbox, and glassmorphism (backdrop-filter: blur(), semi-transparent backgrounds) to implement a fully functional tabbed UI component.

Constraints

• Use only CSS (no JavaScript).

• Tabs container should be display flex, gap 1rem, and wrap on small screens.

• Tab buttons should be background: rgba(255,255,255,0.2), backdrop-filter: blur(8px), padding 0.75rem 1.5rem, border radius 8px, transition on color and border.

• Active tab indicator should be border-bottom: 2px solid #fff animated via transition.

• Content panels should be hidden by default (display: none), displayed when corresponding input is :checked.

• Smooth fade transition for content (opacity and visibility).

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.