- aspect-ratio (to make squares evenly.) - position: fixed; inset: 0 0 0 20%; (top,right,bottom,left) - background: hsl( var(--clr-white) / 0.05); backdrop-filter: blur(1.5rem); (make frosted glass look) - margin-block - aria-hidden=“true” for screen readers Aria-selected styles HTML <div style="margin-bottom: 50vh"> <!-- Tabs --> <div class="tab-list underline-indicators flex"> <button aria-selected="true" class="uppercase ff-sans-cond text-accent bg-dark letter-spacing-2">Moon</button> <button aria-selected="false" class="uppercase ff-sans-cond text-accent bg-dark letter-spacing-2">Mars</button> <button aria-selected="false" class="uppercase ff-sans-cond text-accent bg-dark letter-spacing-2">Europa</button> </div> CSS .underline-indicators > .active, .underline-indicators > [aria-selected="true"] { color: hsl( var(--clr-white) / 1); border-color: hsl( var(--clr-white) / 1); } GRID Responsive(?) Grid columns: .grid-container { text-align: left; column-gap: var(--container-gap, 2rem); grid-template-columns: minmax(2rem, 1fr) repeat(2, minmax(0, 30rem)) minmax(2rem, 1fr); } - .grid-container * { max-width: 45ch;} - place-items/place-content (grid property)
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter