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.

Responsive Animated Nav

7.12.2014

A fully responsive animated navigation menu for Bootstrap literally copy and paste and you're on your way.

Made with: HTML,CSS (SCSS),JS

View Code

PlaceholderResponsive Animated Nav

Animated Weather Icons

12.02.2013

This is a little set of animated single element CSS weather icons.

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

View Code

Animated Weather Icons

Responsive Accordion

25.08.2020

Made with: HTML,CSS,JS

View Code

PlaceholderResponsive Accordion

Css Hue Rotation With Gradient

17.06.2016

Made with: HTML (Haml),CSS (SCSS)

View Code

Css Hue Rotation With Gradient

Cloud

14.03.2013

Made with: HTML,CSS

View Code

Cloud

Neuomorphism Trapped Animated Blob

4.03.2021

This is an experiment with the checkbox. In version one this is a simple reveal animation upon check to show the animated blob.

Made with: HTML,CSS (SCSS)

View Code

Neuomorphism Trapped Animated Blob

Pure Css Gooey Morph

15.10.2018

SVG not involved. Animating primarily border-radius, plus some opacity and basic transforms.

Made with: HTML,CSS

View Code

Pure Css Gooey Morph

Staggered Wave Loading

6.10.2019

Made with: HTML,CSS (SCSS)

View Code

Staggered Wave Loading

Checkerboard Reveal

14.01.2021

Made with: HTML (Haml),CSS (SCSS)

View Code

Checkerboard Reveal

Spread Cards

4.09.2017

Made with: HTML,CSS (Less),JS

View Code

Spread Cards

Take Your Pill: Css Buttons

26.07.2018

Take your pill: clean CSS buttons with custom properties.

Made with: HTML,CSS (SCSS)

View Code

Take Your Pill: Css Buttons

Motion Hover Effect For A Background Image Grid

10.06.2020

A short tutorial on how to achieve a motion hover effect on a background image grid.

Made with: HTML,CSS,JS

View Code

PlaceholderMotion Hover Effect For A Background Image Grid
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