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

Frontend Components and Examples

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

Brighten

8.08.2020

Made with: HTML,CSS

View Code

Brighten

Loader #4

7.03.2018

Simple loader.

Made with: HTML

View Code

Loader #4

Interactive Button Border

31.01.2019

Button with an interactive border gradient.

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

View Code

Interactive Button Border

Animated Svg Frame Slideshow

15.11.2017

An experimental slideshow that shows an animated SVG frame when transitioning between slides. Different shapes can be used for creating a variety of styles. Used anime.js for the animations.

Made with: HTML,CSS,JavaScript

View Code

Animated Svg Frame Slideshow

Grid Gallery - The Elusive Gallery

6.07.2020

Made with: HTML,CSS

View Code

Grid Gallery - The Elusive Gallery

Dot Digit Input

23.04.2017

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

View Code

Dot Digit Input

Bootstrap 5 Glowing Login Form

1.11.2020

Made with: HTML,CSS

View Code

Bootstrap 5 Glowing Login Form

Grid Experiment No. 4

14.01.2018

Recreation of a print menu from "The Phoenicia Diner in Phoenicia", NY using CSS grid.

Made with: HTML

View Code

Grid Experiment No. 4

Warning Bar

10.04.2020

CSS animations, variables and gradients to create a scrolling warning bar.

Made with: HTML,CSS (SCSS)

View Code

Warning Bar

Furry

16.08.2020

Made with: HTML,CSS,JS

View Code

Furry

Avatar Border Effect

15.04.2021

15 declarations, 1 element, no pseudos.

Made with: HTML,CSS (SCSS)

View Code

Avatar Border Effect

Sidebar Indicators

7.09.2017

Sidebar menu with indicators.

Made with: HTML

View Code

Sidebar Indicators
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