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.

Threejs Basic Character Customisation

25.05.2020

Made with: HTML,CSS (SCSS),JS

View Code

Threejs Basic Character Customisation

Skew Animation Hero

4.05.2019

Add a bit of animation to SVG polygon/diagonal lines when scrolling with a few lines of JavaScript.

Made with: HTML,CSS (SCSS),JS

View Code

PlaceholderSkew Animation Hero

Css Filter Cards

5.05.2019

Made with: HTML,CSS

View Code

Css Filter Cards

Expand/Collapse Cards With Figure Cut Text

7.08.2018

Expand/collapse cards with text cut according to the shape of the label. Using CSS clip-path to create a reveal effect on the text hidden behind vintage labels.

Made with: HTML,CSS

View Code

Expand/Collapse Cards With Figure Cut Text

Tea Loading

30.01.2020

Tea loading with SVG animation.

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

View Code

Tea Loading

Notify Me

15.10.2018

Form validation using HTML required and pattern attributes together with CSS :required and :valid selectors.

Made with: HTML,CSS (SCSS)

View Code

Notify Me

Hover Highlight Effect

14.07.2017

Uses CSS variables, but still looks great without.

Made with: HTML,CSS,JS

View Code

Hover Highlight Effect

Vue Tabs

1.11.2017

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

View Code

PlaceholderVue Tabs

Pure Css Loader #31

30.01.2020

One element swappy.

Made with: HTML,CSS (SCSS)

View Code

Pure Css Loader #31

Bootstrap Checkbox List

12.02.2020

Using Bootstrap 4 custom checkboxes, build an elegant food form.

Made with: HTML,CSS

View Code

PlaceholderBootstrap Checkbox List

Pure Css Responsive Gallery

9.11.2018

Tired of writing JavaScript? Have you written your fair share of jQuery onclick events? Despair not! For you can make a responsive gallery in just HTML and CSS. All you need are some labels and some exotic CSS. Have fun!

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

View Code

Pure Css Responsive Gallery
PlaceholderBootstrap 4 Animated Login And Sign-Up Form
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