HTML and CSS dashboard code examples from Codepen and other resources.

Demo image: Claymorphic Dashboard

Author

  • MOZZARELLA

Links

Made with

  • HTML / CSS

About a code

Claymorphic Dashboard

Example user interface using the 2022 Claymorphic design trend. There is no JavaScript, this is only the design with some CSS interactions. It is responsive to all device widths. Uses primarily the web colors MediumSpringGreen, SpringGreen, SeaGreen, PaleGreen & DarkSeaGreen; with hue-rotated variants.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Dark UI - Bank Dashboard Concept

Author

  • Håvard Brynjulfsen

Links

Made with

  • HTML / CSS (SCSS)

About a code

Dark UI - Bank Dashboard Concept

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: phosphor-icons.css

Demo image: Dashboard UI

Author

  • Håvard Brynjulfsen

Links

Made with

  • HTML / CSS (SCSS)

About a code

Dashboard UI

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: phosphor-icons.css

Demo image: CMS Concept

Author

  • Håvard Brynjulfsen

Links

Made with

  • HTML / CSS (SCSS)

About a code

CMS Concept

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Products Dashboard UI

Author

  • Aybüke Ceylan

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Products Dashboard UI

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Project/Kanban Board

Author

  • Rob Stinson

Links

Made with

  • HTML / CSS

About a code

Project/Kanban Board

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: tailwind.css

Demo image: Dashboard UI

Author

  • Mert Cukuren

Links

Made with

  • HTML / CSS (SCSS)

About a code

Dashboard UI

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: tailwind.css

Demo image: Beautiful Dashboard UI

Author

  • Abubaker Saeed

Links

Made with

  • HTML / CSS

About a code

Beautiful Dashboard UI

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Task Management Dashboard UI

Author

  • Aybüke Ceylan

Links

Made with

  • HTML / CSS (SCSS)

About a code

Task Management Dashboard UI

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Dashboard

Author

  • Joseph Rex

Links

Made with

  • HTML / CSS (SCSS)

About a code

Dashboard

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Dashboard Design with Flexbox

Author

  • Aysenur Turk

Links

Made with

  • HTML / CSS

About a code

Dashboard Design with Flexbox

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Deals Management Dashboard for Account Managers

Author

  • Chris Coyier

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Deals Management Dashboard for Account Managers

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: bulma.css

Demo image: Dashboard Layout Design - iPad Pro

Author

  • Sabarinathan Masilamani

Links

Made with

  • HTML / CSS (SCSS)

About a code

Dashboard Layout Design - iPad Pro

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Users Dashboard

Author

  • Vojtěch Musil

Links

Made with

  • HTML / CSS (Less)

About a code

Users Dashboard

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Demo image: Stock App Dashboard

Author

  • Filip Vitas

Links

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

Stock App Dashboard

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -