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.

Simple Patterns

19.08.2019

Made with: HTML,CSS (SCSS)

View Code

Simple Patterns

Blog Preview Modal

6.02.2019

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

View Code

Blog Preview Modal

Paper Textarea

30.06.2015

Made with: HTML,CSS

View Code

Paper Textarea

Gradient Buttons

27.12.2016

CSS gradient buttons with Font Awesome icons.

Made with: HTML,CSS

View Code

Gradient Buttons

Only Css: Moon Clip

14.08.2020

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

View Code

Only Css: Moon Clip

Glitch Text

24.09.2016

Glitchy text effect.

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

View Code

Glitch Text

Tabs

17.09.2019

The + selector selects the next adjacent element. Historically this has been cool for styling labels. With CSS grid, an element can be next to another in markup, but somewhere totally different in display. This pen uses a simple input[type="radio"]:checked selector combined with a lot of +'s to style different pages of an imaginary microsite.

Made with: HTML,CSS (SCSS)

View Code

Tabs

Bootstrap Shopping Cart

9.05.2019

Made with: HTML,CSS

View Code

Bootstrap Shopping Cart

Impossible Tic-Tac-Toe

23.01.2016

A simple game of tic-tac-toe. It is impossible to win, best you can do is tie!

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

View Code

Impossible Tic-Tac-Toe

Night Drive

10.12.2016

Take a night drive through a snowy landscape.

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

View Code

Night Drive

Multi-Buttons - Animals

6.01.2020

Made with: HTML,CSS (SCSS),JS

View Code

Multi-Buttons - Animals

404 Page

14.10.2017

Animated HTML 404 page template.

Made with: HTML,CSS,JavaScript

View Code

404 Page
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