How to Easily Create Pure CSS Tabs (No JavaScript Needed!)

Link to code:

In today's video I'll be showing you how to easily create CSS-only tabs - this is a perfect solution that only requires HTML & CSS and can easily be added to an existing website or web application.

For your reference, check this out:

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#dcode #html #css

[himabimdimwim]

Oh, elegant solution! I wonder how well these nest inside of one another, it could be a unique primary navigation system!

[pratikdevle]

was searching for such tutorial...very easy to understand for beginners. Really nicely explained with pure css. 👍

[jean-michellaborie]

Thanks a lot for this video: easy to understand, simple to implement and very useful

[nareshhidalgo]

What can I do to make it work on mobile or responsive? When I click on it, it doesn't work.

[badcatdesign]

Could this work via the keyboard? Tabbable? Accessible?

[lulusaikou]

Thank you very much! I learned a lot!❤

[anonymousperson]

Hi. Does making the tabs differ at all when making a spreadsheet like excel...? Do you know of a video that shows how to make tabs with a spreadsheet situation...? I tried making the "flex-wrap" idea but it didn't work. I'm not sure what I did wrong... Currently it shows both spreadsheets on the same page...one under the other...🙏

[dishydez]

Great, was looking for something like this. Quick q, is there a way to create a new tab button? As in lile a chrome or browser tab to open a new tab, is there a way to do this for this tutorial?

[carloautor]

I was just wondering I do we have to select the two adjacent siblings ? .tabs__radio:checked + .tabs__label + .tabs__content, why cant we just .tabs__radio:checked > .tabs__content ?

Can someone answer? Thank you

[RianYK]

Please resume yesterday tutorial about table, can we make datatable with pure JavaScript?

[anuragnair]

hey man, thanks for this. what is the name of the vsc theme tho?

[iamTazim]

Plesse make an video, how to create Mobile (responsive) 2 colum card layout 🙂

[AB-msmy]

13:45 code or didn't happen! Many browsers have bugs and you can make it work in one browser but not another. Good idea but half-assed implementation.

[saemjamin]

Hey Dom, thanks a lot for the tutorial. Is it possible that it doesn't work if the CSS tabs are inserted more than twice on a page?