4. Tabs using modern technologies

Requirements

• Create at least 3 tabs - navigation and content panels
• In the content panel of each tab add at least 1 title
• In the content panel of each tab add at least 3 paragraphs of text
• Feel free to add any other content in the panels or outside of them
• ⭐ Use at least 1 custom element from any web component UI library (You will find couple suggestions in the Resources section)
• Use CDN for your dependencies instead of a package manager like NPM or yarn
• Feel free to use any components from the UI library of your choice

Design preview

Personal preference

Resources

• UI library suggestions
  • Shoelace web components - Tabs
  • Material web components CDN setup
  • Material web components - Tabs
  • ING - Lion
  • Trendyol - Baklava
  • Microsoft - Fast
• Alternative CDN provider

Learn more

• Going Buildless: ES Modules
• Webcomponents.org
• Open Web components

Discussion topics

• CDNs
• CJS vs AMD vs UMD vs ESM
• Scripts of type module
• Import whole library or specific module
• Importmaps
• Active class vs hidden attribute vs aria-selected