Home

This tailwind example is contributed by Ramkesh Gupta, on 31-Dec-2025. Component is made with Tailwind CSS v3. It is responsive.

Breadcrumb

Author Ramkesh Gupta

112

Fork Fullscreen

<div class="min-h-screen bg-slate-50 text-slate-800">
  
  <div class="bg-slate-900 text-white">
    <div class="max-w-7xl mx-auto px-4 py-2 flex flex-col sm:flex-row gap-2 sm:items-center sm:justify-between text-sm">
      <div class="flex gap-4 flex-wrap">
        <span>📍 Rupandehi, Nepal</span>
        <span>📧 contact@mewsmedia.digital</span>
        <span>📞 9702683618</span>
      </div>
      <div class="flex gap-3">
        <a class="hover:underline" href="#">Facebook</a>
        <a class="hover:underline" href="#">Instagram</a>
        <a class="hover:underline" href="#">WhatsApp</a>
      </div>
    </div>
  </div>

<header class="sticky top-0 z-40 bg-white/80 backdrop-blur border-b">
    <div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
      <div class="flex items-center gap-3">
        <div class="h-10 w-10 rounded-xl bg-slate-900 text-white flex items-center justify-center font-black">MM</div>
        <div>
          <div class="font-extrabold text-lg leading-5">Mews Media</div>
          <div class="text-xs text-slate-500">Digital Marketing & Creative Studio</div>
        </div>
      </div>

<nav class="hidden md:flex items-center gap-6 text-sm font-semibold">
        <a class="hover:text-slate-900 text-slate-600" href="#services">Services</a>
        <a class="hover:text-slate-900 text-slate-600" href="#portfolio">Portfolio</a>
        <a class="hover:text-slate-900 text-slate-600" href="#about">About</a>
        <a class="hover:text-slate-900 text-slate-600" href="#testimonials">Reviews</a>
        <a class="hover:text-slate-900 text-slate-600" href="#contact">Contact</a>
      </nav>

<div class="flex items-center gap-3">
        <a href="#contact" class="hidden sm:inline-flex px-4 py-2 rounded-xl bg-slate-900 text-white font-semibold shadow hover:opacity-90">
          Get Quote
        </a>
        <button class="md:hidden px-3 py-2 rounded-xl border bg-white">☰</button>
      </div>
    </div>
  </header>

<section class="relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-900 to-slate-700"></div>
    <div class="absolute -top-24 -right-24 h-72 w-72 rounded-full bg-white/10 blur-2xl"></div>
    <div class="absolute -bottom-24 -left-24 h-72 w-72 rounded-full bg-white/10 blur-2xl"></div>

<div class="relative max-w-7xl mx-auto px-4 py-16 sm:py-20 grid lg:grid-cols-2 gap-10 items-center">
      <div class="text-white">
        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 border border-white/10 text-sm">
          🚀 Grow your business with Mews Media
        </div>
        <h1 class="mt-4 text-4xl sm:text-5xl font-extrabold leading-tight">
          Meta Ads, Branding & Websites that bring <span class="text-emerald-300">Real Results</span>
        </h1>
        <p class="mt-4 text-white/80 text-lg max-w-xl">
          हामी Facebook/Instagram Ads, Graphics Design, Branding, Website Development र Content Creation मार्फत
          तपाईंको business लाई next level पुर्‍याउँछौँ।
        </p>

<div class="mt-6 flex flex-col sm:flex-row gap-3">
          <a href="#contact" class="px-5 py-3 rounded-2xl bg-emerald-400 text-slate-900 font-bold shadow hover:opacity-90">
            Free Consultation
          </a>
          <a href="#portfolio" class="px-5 py-3 rounded-2xl bg-white/10 border border-white/20 text-white font-bold hover:bg-white/15">
            View Work
          </a>
        </div>

<div class="mt-8 grid grid-cols-3 gap-4 max-w-md">
          <div class="bg-white/10 border border-white/10 rounded-2xl p-4">
            <div class="text-2xl font-black">120+</div>
            <div class="text-sm text-white/70">Campaigns</div>
          </div>
          <div class="bg-white/10 border border-white/10 rounded-2xl p-4">
            <div class="text-2xl font-black">50+</div>
            <div class="text-sm text-white/70">Brands</div>
          </div>
          <div class="bg-white/10 border border-white/10 rounded-2xl p-4">
            <div class="text-2xl font-black">4.9★</div>
            <div class="text-sm text-white/70">Ratings</div>
          </div>
        </div>
      </div>

<div class="bg-white rounded-3xl shadow-xl p-6 sm:p-8 border">
        <h3 class="text-xl font-extrabold">Get a Quick Quote</h3>
        <p class="text-sm text-slate-500 mt-1">हामी 1 घण्टा भित्र reply गर्छौँ।</p>

<div class="mt-5 grid gap-3">
          <input class="w-full px-4 py-3 rounded-2xl border focus:outline-none focus:ring-2 focus:ring-slate-900/20" placeholder="Full Name" />
          <input class="w-full px-4 py-3 rounded-2xl border focus:outline-none focus:ring-2 focus:ring-slate-900/20" placeholder="Phone Number" />
          <input class="w-full px-4 py-3 rounded-2xl border focus:outline-none focus:ring-2 focus:ring-slate-900/20" placeholder="Business Name" />
          <select class="w-full px-4 py-3 rounded-2xl border focus:outline-none focus:ring-2 focus:ring-slate-900/20">
            <option>Select Service</option>
            <option>Facebook / Instagram Ads</option>
            <option>Graphics Design & Branding</option>
            <option>Website Development</option>
            <option>Content & Video Editing</option>
          </select>
          <textarea class="w-full px-4 py-3 rounded-2xl border focus:outline-none focus:ring-2 focus:ring-slate-900/20" rows="4" placeholder="Tell us your goal..."></textarea>
          <button class="w-full px-5 py-3 rounded-2xl bg-slate-900 text-white font-bold shadow hover:opacity-95">
            Submit
          </button>
          <div class="text-xs text-slate-500">By submitting, you agree to be contacted by Mews Media.</div>
        </div>
      </div>
    </div>
  </section>

<section class="max-w-7xl mx-auto px-4 py-10">
    <div class="text-center text-sm text-slate-500">Trusted by local businesses</div>
    <div class="mt-5 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
      <div class="h-14 rounded-2xl bg-white border flex items-center justify-center font-bold text-slate-400">Logo</div>
      <div class="h-14 rounded-2xl bg-white border flex items-center justify-center font-bold text-slate-400">Logo</div>
      <div class="h-14 rounded-2xl bg-white border flex items-center justify-center font-bold text-slate-400">Logo</div>
      <div class="h-14 rounded-2xl bg-white border flex items-center justify-center font-bold text-slate-400">Logo</div>
      <div class="h-14 rounded-2xl bg-white border flex items-center justify-center font-bold text-slate-400">Logo</div>
      <div class="h-14 rounded-2xl bg-white border flex items-center justify-center font-bold text-slate-400">Logo</div>
    </div>
  </section>

<section id="services" class="max-w-7xl mx-auto px-4 py-14">
    <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-4">
      <div>
        <h2 class="text-3xl font-extrabold">Our Services</h2>
        <p class="mt-2 text-slate-600 max-w-2xl">
          Ads चलाउने मात्र होइन — tracking, creatives, copy, landing page र reporting सम्म end-to-end service।
        </p>
      </div>
      <a href="#contact" class="inline-flex px-5 py-3 rounded-2xl bg-white border shadow-sm font-bold hover:bg-slate-50">
        Request Pricing →
      </a>
    </div>

<div class="mt-8 grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white border rounded-3xl p-6 shadow-sm hover:shadow-md transition">
        <div class="text-2xl">📣</div>
        <h3 class="mt-3 font-extrabold text-xl">Facebook / Instagram Ads</h3>
        <p class="mt-2 text-slate-600">Lead, Message, Sales campaign setup + audience targeting + optimization.</p>
        <ul class="mt-4 text-sm text-slate-600 space-y-1 list-disc pl-5">
          <li>Campaign Strategy</li>
          <li>Pixel / Tracking</li>
          <li>Weekly Reporting</li>
        </ul>
      </div>

<div class="bg-white border rounded-3xl p-6 shadow-sm hover:shadow-md transition">
        <div class="text-2xl">🎨</div>
        <h3 class="mt-3 font-extrabold text-xl">Graphics & Branding</h3>
        <p class="mt-2 text-slate-600">Logo, Banner, Post design, Brand identity, Creative templates.</p>
        <ul class="mt-4 text-sm text-slate-600 space-y-1 list-disc pl-5">
          <li>Brand Kit</li>
          <li>Social Media Designs</li>
          <li>Ads Creatives</li>
        </ul>
      </div>

<div class="bg-white border rounded-3xl p-6 shadow-sm hover:shadow-md transition">
        <div class="text-2xl">💻</div>
        <h3 class="mt-3 font-extrabold text-xl">Website Development</h3>
        <p class="mt-2 text-slate-600">Business website, landing pages, SEO-ready, fast & responsive.</p>
        <ul class="mt-4 text-sm text-slate-600 space-y-1 list-disc pl-5">
          <li>Modern UI</li>
          <li>Contact/Lead Forms</li>
          <li>Hosting Guidance</li>
        </ul>
      </div>

<div class="bg-white border rounded-3xl p-6 shadow-sm hover:shadow-md transition">
        <div class="text-2xl">🎬</div>
        <h3 class="mt-3 font-extrabold text-xl">Video Editing & Reels</h3>
        <p class="mt-2 text-slate-600">Short reels editing, captions, hooks, trend-based content.</p>
        <ul class="mt-4 text-sm text-slate-600 space-y-1 list-disc pl-5">
          <li>Reels / Shorts</li>
          <li>Subtitles</li>
          <li>Ad Video</li>
        </ul>
      </div>

<div class="bg-white border rounded-3xl p-6 shadow-sm hover:shadow-md transition">
        <div class="text-2xl">📈</div>
        <h3 class="mt-3 font-extrabold text-xl">SEO & Google Business</h3>
        <p class="mt-2 text-slate-600">Local SEO, Google Business Profile optimization & ranking.</p>
        <ul class="mt-4 text-sm text-slate-600 space-y-1 list-disc pl-5">
          <li>Local SEO</li>
          <li>GBP Setup</li>
          <li>Reviews Strategy</li>
        </ul>
      </div>

<div class="bg-white border rounded-3xl p-6 shadow-sm hover:shadow-md transition">
        <div class="text-2xl">🧠</div>
        <h3 class="mt-3 font-extrabold text-xl">Strategy & Consulting</h3>
        <p class="mt-2 text-slate-600">Content plan, ad funnel, marketing audit and growth roadmap.</p>
        <ul class="mt-4 text-sm text-slate-600 space-y-1 list-disc pl-5">
          <li>Audit</li>
          <li>Funnel Plan</li>
          <li>KPI Tracking</li>
        </ul>
      </div>
    </div>
  </section>

<section id="portfolio" class="bg-white border-y">
    <div class="max-w-7xl mx-auto px-4 py-14">
      <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-4">
        <div>
          <h2 class="text-3xl font-extrabold">Recent Work</h2>
          <p class="mt-2 text-slate-600">Creative designs, ads & websites — केही sample work.</p>
        </div>
        <a href="#contact" class="inline-flex px-5 py-3 rounded-2xl bg-slate-900 text-white font-bold hover:opacity-95">
          Start a Project
        </a>
      </div>

<div class="mt-8 grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="rounded-3xl border bg-slate-50 p-5">
          <div class="h-44 rounded-2xl bg-slate-200 flex items-center justify-center font-bold text-slate-500">Design</div>
          <div class="mt-4 font-extrabold">Branding Pack</div>
          <div class="text-sm text-slate-600">Logo + Social Templates</div>
        </div>
        <div class="rounded-3xl border bg-slate-50 p-5">
          <div class="h-44 rounded-2xl bg-slate-200 flex items-center justify-center font-bold text-slate-500">Ads</div>
          <div class="mt-4 font-extrabold">Lead Campaign</div>
          <div class="text-sm text-slate-600">Message/Lead Optimization</div>
        </div>
        <div class="rounded-3xl border bg-slate-50 p-5">
          <div class="h-44 rounded-2xl bg-slate-200 flex items-center justify-center font-bold text-slate-500">Website</div>
          <div class="mt-4 font-extrabold">Business Website</div>
          <div class="text-sm text-slate-600">Fast + Mobile Responsive</div>
        </div>
      </div>
    </div>
  </section>

<section id="about" class="max-w-7xl mx-auto px-4 py-14">
    <div class="grid lg:grid-cols-2 gap-10 items-center">
      <div>
        <h2 class="text-3xl font-extrabold">Why Mews Media?</h2>
        <p class="mt-3 text-slate-600">
          हामी creative + performance दुबैमा focus गर्छौँ। ROI, leads, messages र brand trust— सबैलाई measurable बनाउने हाम्रो goal हो।
        </p>

<div class="mt-6 grid sm:grid-cols-2 gap-4">
          <div class="bg-white border rounded-3xl p-5">
            <div class="font-extrabold">✅ Result Driven</div>
            <div class="text-sm text-slate-600 mt-1">Clear strategy + tracking + reporting.</div>
          </div>
          <div class="bg-white border rounded-3xl p-5">
            <div class="font-extrabold">⚡ Fast Delivery</div>
            <div class="text-sm text-slate-600 mt-1">Quick creatives & campaign execution.</div>
          </div>
          <div class="bg-white border rounded-3xl p-5">
            <div class="font-extrabold">🎯 Perfect Targeting</div>
            <div class="text-sm text-slate-600 mt-1">Right audience = low CPM + more messages.</div>
          </div>
          <div class="bg-white border rounded-3xl p-5">
            <div class="font-extrabold">🤝 Support</div>
            <div class="text-sm text-slate-600 mt-1">Friendly team + long-term partnership.</div>
          </div>
        </div>
      </div>

<div class="bg-slate-900 text-white rounded-3xl p-8 shadow-xl">
        <h3 class="text-2xl font-extrabold">What you get</h3>
        <ul class="mt-4 space-y-2 text-white/85 list-disc pl-5">
          <li>Campaign setup + creative design + copywriting</li>
          <li>Daily/weekly optimization for better performance</li>
          <li>Reporting + next steps plan</li>
          <li>Landing page / website support (if required)</li>
        </ul>

<div class="mt-6 flex flex-col sm:flex-row gap-3">
          <a href="#contact" class="px-5 py-3 rounded-2xl bg-emerald-400 text-slate-900 font-bold hover:opacity-90">
            Book a Call
          </a>
          <a href="#services" class="px-5 py-3 rounded-2xl bg-white/10 border border-white/20 font-bold hover:bg-white/15">
            Explore Services
          </a>
        </div>
      </div>
    </div>
  </section>

<section id="testimonials" class="bg-white border-y">
    <div class="max-w-7xl mx-auto px-4 py-14">
      <h2 class="text-3xl font-extrabold text-center">Client Reviews</h2>
      <p class="text-center text-slate-600 mt-2">What people say about Mews Media</p>

<div class="mt-8 grid md:grid-cols-3 gap-6">
        <div class="border rounded-3xl p-6 bg-slate-50">
          <div class="font-extrabold">“Great leads & fast support”</div>
          <p class="mt-2 text-sm text-slate-600">Our messages increased within a week. Creative and targeting both were strong.</p>
          <div class="mt-4 text-sm font-bold">— Local Business</div>
        </div>
        <div class="border rounded-3xl p-6 bg-slate-50">
          <div class="font-extrabold">“Professional designs”</div>
          <p class="mt-2 text-sm text-slate-600">Branding and posts look premium now. Highly recommended.</p>
          <div class="mt-4 text-sm font-bold">— Shop Owner</div>
        </div>
        <div class="border rounded-3xl p-6 bg-slate-50">
          <div class="font-extrabold">“Website delivered on time”</div>
          <p class="mt-2 text-sm text-slate-600">Mobile friendly and clean UI. Support is excellent.</p>
          <div class="mt-4 text-sm font-bold">— Service Provider</div>
        </div>
      </div>
    </div>
  </section>

<section id="contact" class="max-w-7xl mx-auto px-4 py-14">
    <div class="grid lg:grid-cols-2 gap-8 items-start">
      <div>
        <h2 class="text-3xl font-extrabold">Contact Us</h2>
        <p class="mt-2 text-slate-600">Project सुरु गर्न चाहनुहुन्छ? Call/WhatsApp गर्नुहोस् वा form भर्नुहोस्।</p>

<div class="mt-6 space-y-3 text-slate-700">
          <div class="bg-white border rounded-2xl p-4">📍 <span class="font-bold">Address:</span> Rupandehi, Nepal</div>
          <div class="bg-white border rounded-2xl p-4">📧 <span class="font-bold">Email:</span> contact@mewsmedia.digital</div>
          <div class="bg-white border rounded-2xl p-4">📞 <span class="font-bold">Phone:</span> 9702683618</div>
        </div>

<div class="mt-6 flex gap-3 flex-wrap">
          <a class="px-5 py-3 rounded-2xl bg-slate-900 text-white font-bold hover:opacity-95" href="#">
            WhatsApp Now
          </a>
          <a class="px-5 py-3 rounded-2xl bg-white border font-bold hover:bg-slate-50" href="#">
            Call Now
          </a>
        </div>
      </div>

<div class="bg-white border rounded-3xl p-6 shadow-sm">
        <h3 class="text-xl font-extrabold">Send a Message</h3>
        <div class="mt-4 grid gap-3">
          <input class="w-full px-4 py-3 rounded-2xl border focus:outline-none focus:ring-2 focus:ring-slate-900/20" placeholder="Your Name" />
          <input class="w-full px-4 py-3 rounded-2xl border focus:outline-none focus:ring-2 focus:ring-slate-900/20" placeholder="Phone" />
          <input class="w-full px-4 py-3 rounded-2xl border focus:outline-none focus:ring-2 focus:ring-slate-900/20" placeholder="Email (optional)" />
          <textarea class="w-full px-4 py-3 rounded-2xl border focus:outline-none focus:ring-2 focus:ring-slate-900/20" rows="5" placeholder="Your message..."></textarea>
          <button class="w-full px-5 py-3 rounded-2xl bg-emerald-400 text-slate-900 font-bold hover:opacity-90">
            Send
          </button>
          <div class="text-xs text-slate-500">We respond quickly during business hours.</div>
        </div>
      </div>
    </div>
  </section>

<footer class="bg-slate-900 text-white">
    <div class="max-w-7xl mx-auto px-4 py-10 grid md:grid-cols-3 gap-8">
      <div>
        <div class="font-extrabold text-xl">Mews Media</div>
        <p class="mt-2 text-white/70 text-sm">
          Digital marketing, creative design & web development — Nepal based growth partner.
        </p>
      </div>
      <div>
        <div class="font-extrabold">Quick Links</div>
        <div class="mt-3 grid gap-2 text-sm text-white/80">
          <a class="hover:underline" href="#services">Services</a>
          <a class="hover:underline" href="#portfolio">Portfolio</a>
          <a class="hover:underline" href="#about">About</a>
          <a class="hover:underline" href="#contact">Contact</a>
        </div>
      </div>
      <div>
        <div class="font-extrabold">Business Hours</div>
        <div class="mt-3 text-sm text-white/80 space-y-1">
          <div>Sun - Fri: 9:00 AM - 6:00 PM</div>
          <div>Saturday: Closed</div>
        </div>
      </div>
    </div>
    <div class="border-t border-white/10">
      <div class="max-w-7xl mx-auto px-4 py-4 text-sm text-white/70 flex flex-col sm:flex-row gap-2 sm:items-center sm:justify-between">
        <div>© <span class="font-bold">Mews Media</span>. All rights reserved.</div>
        <div class="text-white/60">Made with ❤️ in Nepal</div>
      </div>
    </div>
  </footer>
</div>

Related Examples

Default breadcrumb
Use the following breadcrumb example to show the hierarchical structure of pages

Author:
Md. Tofayel islam

1 year ago

3.3k
Breadcrumb

Author:
Gopi Yadav

3 years ago

10.1k
background
A background is the area behind the content of an element (like a page, section, or div). It helps define the look and feel by adding colors, images, gradients, or patterns.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

946
Rwanda-Canada Transport Services | Safe & Reliable Shipping
Attractive color scheme inspired by Rwanda's landscapes

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

567
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)

8 months ago

851
home
search home

Author:
Uwera Dorcas

8 months ago

355
Breadcrumb with icon

Author:
Samuel Dawson

2 years ago

11.5k
Why Everyone Around the World Loves Us
"Our platform is built to serve everyone, everywhere — with speed, security, and a human touch." "From cities to remote villages, our features connect the world through technology that truly cares." "Designed with the whole world in mind — fast, secure, and made for real people." "No matter who you are or where you're from, our tools are built to empower and inspire you." "We believe great technology should be accessible, safe, and helpful to all — and that's exactly what we offer."

Author:
Nicole Shalom

8 months ago

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

Author:
Nick Girga

9 months ago

932
Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4
A simple and responsive file tree component built with Tailwind CSS and vanilla JavaScript. Each folder can be expanded or collapsed with smooth transitions, including the root directory. This component is useful for project explorers, code editors, or file management UIs.

Author:
Indra

5 months ago

527
Mfuranziza Hamza
Mfuranziza Hamza full development

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

739
Breadcrumb

Author:
Laurits

3 years ago

11.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components