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.

Scrolling Gradient

27.06.2018

A background gradient that adapts to scroll position.

Made with: HTML,CSS (SCSS)

View Code

Scrolling Gradient

Bootstrap Dropdown #18

6.03.2021

Free profile dropdown. It features an avatar, name, location and different dropdown sections that you can improve further.

Made with: HTML,CSS,JS

View Code

PlaceholderBootstrap Dropdown #18

Dismantling Text With Greensock

28.02.2020

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

View Code

Dismantling Text With Greensock

Toggle Checkbox Animation

20.09.2018

Toggle check button. Sweet animation, smooth and right speed.

Made with: HTML,CSS (SCSS)

View Code

Toggle Checkbox Animation

Border Composition And Animation

27.07.2016

Show staggered border composition without resorting to empty elements and using multiple backgrounds instead.

Made with: HTML,CSS

View Code

Border Composition And Animation

Material Ui Popup

27.11.2018

Easing is not easy! However, with the right easing from the Material Design guidelines, you get punchy and snappy animations.

Made with: HTML,CSS

View Code

Material Ui Popup

Pure Css Planet Loader Animation

20.05.2019

Made with: HTML,CSS (SCSS)

View Code

Pure Css Planet Loader Animation

Gradient Button Animations

7.11.2015

Animation buttons with background gradients. One button with a simple gradient shift on hover, and another with an infinite animation on hover.

Made with: HTML,CSS

View Code

Gradient Button Animations

404 Page Not Found

19.04.2014

HTML, CSS and JS 404 page template.

Made with: HTML,CSS,JavaScript

View Code

404 Page Not Found

Range Pills

15.12.2020

Made with: HTML,CSS (Sass),JS

View Code

Range Pills

Scanning Glow Lines

31.05.2019

Made with: HTML,CSS

View Code

Scanning Glow Lines
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