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

Link to code:
codepen.io/dco...
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:
developer.mozi...
🏫 My Udemy Courses - www.udemy.com/...
🎨 Download my VS Code theme - marketplace.vi...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
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!

[@tonibalog]

Dude, this is amazing. Thx a lot.

[@angiebabe2010]

Dude, thank you so much for this!

[@pratikdevle5830]

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

[@Matchadvmp]

This actually worked, thank u

[@photoinshot1355]

Excellent tutorial, thanks!

[@jean-michellaborie8201]

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

[@lulusaikou221]

Thank you very much! I learned a lot!❤

[@vtech8716]

good tutorials, thanks

[@hassantayf]

very cool css tutorial thank's

[@nareshhidalgo2588]

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

[@malikaaissa8764]

really useful thanks a lot

[@badcatdesign]

Could this work via the keyboard? Tabbable? Accessible?

[@josechirino5168]

Awesome work

[@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

[@anonymousperson6188]

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...🙏

[@usmanAli-hw5xu]

thank you

[@anuragnair5]

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

[@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?

[@KarthickKrishnan0014]

You are awesome 👍

[@RianY2K]

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

[@umarnaeem4256]

Best one

[@jaimeruedagomez]

amazing

[@iamTazim9]

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

[@PrasannaNadagoud]

Please can you make vertical tab?

[@rupam0]

Thanks,,,,,🤓

[@dcode-software]

Welcome

[@AB-ms7my]

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.

[@goodshiro10]

If you have problems in rendering styles between browser, test them in every browser using some extension. Also use some prefixes in css properties like -moz for firefox, -webkit for chrome and some browsers, etc

[@sarabibrahim8312]

👏👏👏

[@VrataVenet]

Is flex responsive?

[@dcode-software]

It certainly does encourage responsive behaviour :)

[@ClubMedia]

:)

[@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?

[@daveturnbull7221]

Certainly works with up to 4 tabs as I've done that without any issue.

[@Matchadvmp]

This actually worked, thank u