Gentella
Restaurant
AdminLTE
JohnDoe
Electro
Anime
Titan
BizConsult
Ronald
Pure
Equip
Now UI Kit
ColorMix
antino.io
Portfolio of Emil Andersson
Dsx Gloves
Top Design King Awards
Heave
eyegix
Recode Studios
Tactyqal
Cyd Stumpel
Creatink HTML5 Template
RawSpiceBar

Frontend Components and Examples

Collection of free CSS, HTML, Bootstrap, JavaScript, jQuery, Vue, React, Tailwind and more examples from Codepen and other resources.

Glass

27.06.2020

Made with: HTML,CSS

View Code

Glass

Tabs

12.04.2020

A almost CSS-Only tabs with slab indicator.

Made with: HTML (Pug),CSS (Sass),JS

View Code

Tabs

Gritty Grid Gallery

20.01.2020

A fast idea to use CSS Grid to display an image gallery. Hover/click to expand.

Made with: HTML,CSS (SCSS)

View Code

Gritty Grid Gallery

Infinite Background Animation

4.12.2013

Pure CSS infinite background animation.

Made with: CSS (SCSS)

View Code

Infinite Background Animation

Multiline Underline With Any Color

15.08.2017

Made with: HTML,CSS (SCSS),JS (Babel)

View Code

Multiline Underline With Any Color

Card Flip Reflection

18.12.2019

Made with: HTML,CSS (SCSS)

View Code

Card Flip Reflection

Fancy Banners

3.10.2012

A pure CSS3 fancy text banner using transforms, pseudo-elements, last-child, and more.

Made with: HTML,CSS

View Code

Fancy Banners

Fly_Sidemenu

26.12.2020

Made with: HTML,CSS,JS

View Code

PlaceholderFly_Sidemenu

Card Hover Effect

26.06.2018

HTML and CSS card hover effect.

Made with: HTML (Pug),CSS (Stylus)

View Code

Card Hover Effect

Cells With Backdrop-Filter

4.01.2020

By using overlaying-div-soups with backdrop-filter, its possible to apply fx on any underlying content, e.g. figure, list, details, headings...

Made with: HTML (Pug),CSS (Less)

View Code

Cells With Backdrop-Filter

Vuejs Music/Audio Player Version 2

9.09.2018

A VueJS based audio player created using HTML5 Audio API.

Made with: HTML,CSS (SCSS),JS (Babel)

View Code

PlaceholderVuejs Music/Audio Player Version 2

Pure Css Counter

25.03.2014

Counting up with ::before & ::after content. A pure CSS counter is probably completely useless...but it is possible.

Made with: HTML,CSS (SCSS)

View Code

Pure Css Counter
How to Use CSS Math Functions
How to Use CSS Math Functions
The CSS logical functions calc(), clamp(), min() and max() are supported by all modern web browsers. But, despite being readily available – a simple GitHub search tells us that adoption for these functions has been slow. So, how exactly do we use them to build fluid and responsive layout experiences? Let’s find out.
Easy Dark Mode CSS Trick
Easy Dark Mode CSS Trick
Just one CSS trick and you can achieve Dark mode for your website.
Timedropper a jQuery UI timepicker
Timedropper a jQuery UI timepicker
Timedropper is an eye catching jQuery UI timepicker. Manage time input fields in a standard form. Focus on the input to open an small interactive timepicker. Set time in 12-hour clock in which the 24 hours of the day are divided into two periods. Change time using mousewheel.
Grid Loading Animations
Grid Loading Animations
A set of grid loading animations for your inspiration. The idea is to show grid items with an interesting effect once they are loaded.
Summernote: Super simple WYSIWYG Editor
Summernote: Super simple WYSIWYG Editor
Summernote has a few special features: Paste images from clipboard Saves images directly in the content of the field using base64 encoding, so you don't need to implement image handling at all Simple UI Interactive WYSIWYG editing Handy integration with server