Lawfirm
OnePage
MaleFashion
Revive
DASHMIN
Eshopper
Purple React
Startup
New Spot
Voyage
Alstar
Racks
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.

In/Out Of Focus Text Effect

23.05.2015

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

View Code

In/Out Of Focus Text Effect

Bootstrap Determination Flowchart

19.09.2014

Only Bootstrap determination flowchart.

Made with: HTML,CSS

View Code

Bootstrap Determination Flowchart

Navbar Ui Interaction

30.09.2019

Navbar UI interaction with pure CSS.

Made with: HTML,CSS (SCSS)

View Code

Navbar Ui Interaction

Login Form

24.10.2018

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

View Code

Login Form

Hamburger + Clip-Path

11.04.2021

Using clip-path to create a hamburger menu open effect.

Made with: HTML,CSS

View Code

Hamburger + Clip-Path

Image Hover Effect

31.01.2016

Simple and very nice pulsing image hover effect.

Made with: HTML,CSS

View Code

Image Hover Effect

Geometric Business Card With Css Grid

25.03.2018

Playing around with CSS Grid, Flexbox, clip-path, and radial-gradient.

Made with: HTML,CSS (Less)

View Code

Geometric Business Card With Css Grid

Pixelated Snake Game

29.12.2019

Made with: HTML,CSS,JS

View Code

Pixelated Snake Game

Only Css: Fire

2.08.2017

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

View Code

Only Css: Fire

Bootstrap Chat Room

7.07.2015

Made with: HTML,CSS

View Code

Bootstrap Chat Room

Css Text Stroke And Css Text Border

11.04.2015

Infinite effect only with CSS and HTML5.

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

View Code

Css Text Stroke And Css Text Border

Flexible Multi-Panel Background

17.10.2019

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

View Code

Flexible Multi-Panel Background
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