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.

Solid

7.01.2021

Hover over, or tap this title.

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

View Code

Solid

Info Cards Concept

8.10.2018

Info cards concept with pretty design in HTML and CSS.

Made with: HTML,CSS (SCSS)

View Code

Info Cards Concept

Search Input Animation

7.11.2018

A small little pure CSS animation of search interaction.

Made with: HTML,CSS (SCSS)

View Code

Search Input Animation

Happy Hacking Keyboard

30.05.2013

Made with: HTML,CSS (Sass),JS

View Code

PlaceholderHappy Hacking Keyboard

Background Shape Change

19.02.2020

Made with: HTML,CSS,JS

View Code

Background Shape Change

Star Rating Widget Bootstrap 4

29.06.2017

Simple pure CSS star rating widget for Bootstrap 4.

Made with: HTML,CSS

View Code

PlaceholderStar Rating Widget Bootstrap 4

Bootstrap Dropdown #02

29.12.2020

Clean and minimal profile dropdown menu with avatar, icons and hover effect that shows on click.

Made with: HTML,CSS,JS

View Code

PlaceholderBootstrap Dropdown #02

Animated Css Mask-Image Gradient

9.12.2018

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

View Code

Animated Css Mask-Image Gradient

Share Button Hover Effect

4.08.2021

Made with: HTML,CSS

View Code

Share Button Hover Effect

Basket Weave Pattern

28.03.2016

CSS pattern: basket weave.

Made with: CSS/Less

View Code

Basket Weave Pattern

Bootstrap Cards

9.02.2020

Statistics on minimal cards. Statistics on minimal cards with title & sub title.

Made with: HTML,CSS,JS

View Code

Bootstrap Cards

Letters Effect

11.02.2018

Letters effect on scroll.

Made with: HTML

View Code

Letters Effect
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