Codepen Vertical Tabs

Posted on  by admin

I have put together a whole range of different tabs (CSS) that you can use in your web projects. Whether you are looking for inspiration or want to learn how it is done, you will for sure find something you like in this article. Let’s jump right in, shall we! See the Penon CodePen. A cool animated CSS tab bar with clickable icons. Requires a little JS but nothing difficult. You would have to pair this tab bar with your own content: easy enough by just working out which tab is active and displaying the correct text. See the Penon CodePen. A great example of how you can create effective HTML tabs with just CSS and no JavaScript.

This one will be really easy to learn from as well. This one has cool animations for when you switch between tabs. Both on the actual tab itself and the content. It uses HTML labels to form each tab as well, very simple. See the Penon CodePen. With a little help from JS, you can create a nice animated set of closable tabs.

20. Responsive Tabs That Scale Down

Comes with a fancy animation when you close them, try it! This one is more of a template, but it shows us how we can create tabs that have more of a purpose.

See the Penon CodePen. A nice example of animated tabs using only HTML and CSS. Clean and minimal design with nice hover animations on each tab. When you switch between tabs, it uses a fade/flash to change the text, very slick. The CSS is very well put together as well.

See the Penon CodePen. If you are looking to create CSS tabs with icons, this one is for you. Animated tabs with an indicator can be useful to create a minimal design but the user still knows where they are. These CSS tabs would go nicely on a product landing page to explain the different features of a product or service. See the Penon CodePen.

CSS Tabs inside of a card, with animation on change of tab. Requires a little JS but these card designs are very popular, they are a nice way of containing information with an image or icon. A card is a great way to present engaging information to the user and a tab allows you to maximise the space.

See the Penon CodePen. CSS tabs with a scaling animation and example content. Uses a fancy zoom/scaling animation to transition between tab content.

4. Animated HTML & CSS Tabs