Home
Nick Girga
Gradient Breadcrumb

Gradient Breadcrumb

Breadcrumb. Gradient background. Gradient text on hover. Based on gopi/breadcrumb-2.

This tailwind example is contributed by Nick Girga, on 28-Apr-2025. Component is made with Tailwind CSS v3. It is responsive.

Breadcrumb Gradient

Author Nick Girga

804

Fork Fullscreen

<div class="bg-gradient-to-r from-blue-600/20 to-purple-400/20 rounded-lg p-3 flex items-center flex-wrap">
  
  
  <ul class="flex items-center mr-2">

<li class="inline-flex items-center">
	  <a href="https://myclo.ud/">
		<svg class="w-5 h-auto fill-current mx-2 text-gray-400 hover:text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"/></svg>
	  </a>

<li class="inline-flex items-center hidden sm:block">
	  <a href="https://myclo.ud/projects/" class="text-gray-600 hover:text-transparent hover:bg-clip-text hover:bg-gradient-to-r hover:from-blue-600 hover:to-indigo-600">
		Projects
	  </a>

<li class="inline-flex items-center hidden sm:block">
	  <a href="https://myclo.ud/projects/chocolate-box" class="text-gray-600 hover:text-transparent hover:bg-clip-text hover:bg-gradient-to-r hover:from-indigo-600 hover:to-purple-600">
		Chocolate Box
	  </a>

<li class="inline-flex items-center hidden sm:block">
	  <a href="https://myclo.ud/projects/chocolate-box/downloads" class="text-gray-600 hover:text-transparent hover:bg-clip-text hover:bg-gradient-to-r hover:from-purple-600 hover:to-indigo-800">
		Downloads
	  </a>

<li class="inline-flex items-center sm:hidden block">
	  <a href="https://myclo.ud/projects/chocolate-box/downloads" class="text-gray-600 hover:text-transparent hover:bg-clip-text hover:bg-gradient-to-r hover:from-blue-600 hover:to-indigo-600">
		...
	  </a>
	  
	  <span class="mx-4 h-auto text-gray-400 font-medium">/</span>
	</li>

<li class="inline-flex items-center">
	  <span class="text-gray-400">
		Linux
	  </span>
	</li>
  </ul>

</div>

Related Examples

Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

5 months ago

1.4k
Acode master
Acode master(=>good work for Acode master)

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

756
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

511
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

Author:
KULDEEP

4 months ago

1.1k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

166
Innovative Rwanda-Canada Transport Services Website
Innovative Rwanda-Canada Transport Services Website

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

295
basichtml
this is basic html

Author:
Anonymous

4 months ago

246
Animated Light/Dark Mode Toggle
👉🏻3D glow effects on knob & track 👉🏻Gradient transitions that look holographic 👉🏻Animated pulse when active 👉🏻Dark background gradient instead of a flat color 👉🏻Emoji swap (☀️ → 🌙)

Author:
UI-Templates

3 weeks ago

137
home
search home

Author:
Uwera Dorcas

5 months ago

191
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Author:
Abhiraj

9 months ago

1.5k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

2 months ago

131
Text Animation

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

6 months ago

850

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components