Careo
Hotelier
Nevada
Dinomuz
Lawfirm
OnePage
MaleFashion
Revive
DASHMIN
Eshopper
Purple React
Startup
Heave
eyegix
Recode Studios
Tactyqal
Cyd Stumpel
Creatink HTML5 Template
RawSpiceBar
Diana Lopez
Simple Happy Kitchen
Biggr - creative agency
Herring Bone & Sui
Hakim El Hattab

Frontend Components and Examples

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

Input Field Gradient Border Focus Fun

12.12.2017

A gradient border on an input field that feathers out when focussed.

Made with: HTML

View Code

Input Field Gradient Border Focus Fun

404 Page With Svg

10.10.2014

Animated 404 page with SVG.

Made with: HTML,CSS (Less),JavaScript

View Code

404 Page With Svg

Sunset/Sunrise Animation With Css Variables

22.05.2017

Made with: HTML,CSS (SCSS)

View Code

Sunset/Sunrise Animation With Css Variables

Loader Animation

27.07.2020

Made with: HTML,CSS (SCSS)

View Code

Loader Animation

Tailwindcss + Scss Simple Accordion

16.10.2021

Made with: HTML,CSS (SCSS)

View Code

Tailwindcss + Scss Simple Accordion

Animate Linear Gradient

22.05.2019

Animate linear-gradient using CSS variables and JavaScript. I use two CSS gradients for this effect.

Made with: HTML,CSS,JS

View Code

Animate Linear Gradient

Bruga Music

6.09.2018

Made with:

View Code

Bruga Music

Horizontal Cards - Bootstrap 4

5.04.2018

Horizontal Bootstrap cards with carousel.

Made with: HTML,CSS,JS

View Code

Horizontal Cards - Bootstrap 4

Liquid Type

26.04.2017

Creating a "wave" liquid effect on type using SVG mask.

Made with: HTML,CSS

View Code

Liquid Type

Pink Without Floyd Card

5.08.2019

Made with: HTML,CSS (SCSS),JS

View Code

Pink Without Floyd Card

Mobile Vr Woods Scene

26.01.2019

Made with: HTML,CSS,JS

View Code

Mobile Vr Woods Scene
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