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

416

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

High-Performance Hotel Operations & AI Agent Testing Dashboard
A sophisticated, real-time command center designed for modern hotel management. This dashboard features deep integration for monitoring AI agent performance, guest sentiment, and room occupancy. Built with a "Mobile-First" philosophy, it demonstrates advanced data visualization, glassmorphism UI design, and a centralized state-management architecture. Perfect for showcasing full-stack capabilities in AI-driven automation.

Author:
Ayyamperumal S

2 months ago

446
Dash.OS: Drag & Drop Dashboard Widget System
A fully interactive, freeform dashboard builder for the browser. Drop in widgets, drag them anywhere, resize to fit, and your layout is automatically remembered. Ships with a live Chart.js revenue chart, KPI stats, a task tracker, and a notifications feed, all in a single zero-dependency HTML file with dark/light mode built in.

Author:
Ijila Itunu

1 month ago

319
Breadcrumb

Author:
Gopi Yadav

3 years ago

10.3k
Acode Master - FB & WhatsApp UI Combo
Description (meta description) ni tag ikoreshwa mu mutwe (head) wa HTML igaragaza mu ncamake icyo urubuga cyangwa urupapuro rwawe ruvuga. Iyi description ikoreshwa cyane na search engines (nka Google) mu kwerekana summary y’urubuga mu bisubizo by’ubushakashatsi.

Author:
Code Master(Mfuranziza Dusabe Hamza)

11 months ago

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

Author:
Indra

8 months ago

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

Author:
Abhiraj

1 year ago

2.6k
ACODE MASTER — Cyberpunk Full Stack Developer from Rwanda
"I’m ACODE MASTER — a visionary Full Stack Developer from Rwanda, blending cutting-edge tech with bold design. I specialize in building modern web applications using React, Node.js, and TailwindCSS, inspired by the cyberpunk aesthetic and driven by a passion for digital innovation. Welcome to the future of code."

Author:
Code Master(Mfuranziza Dusabe Hamza)

11 months ago

1.6k
Breadcrum
Different styles of breadcrum component

Author:
Rajesh Maheshwari

1 year ago

1.3k
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

693
Personal Portfolio Website
Nziza HAMZY 😎! Reka dukore full TailwindCSS Portfolio yuzuye na: Hero Section About Section Projects Section (cards) Contact Form Animations & hover effects Fully responsive for mobile

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

957
Simple Breadcrumb Example
Simple Breadcrumb Example with Light and black background options.

Author:
Sedat Kumcu

1 year ago

2.4k
Your Creative Login Page
"Animated Image Login UI" "Tailwind Image Login with Animated Background" "Innovative User Login Experience" "Creative Bubble Background Login" "Login with Personality — Featuring Your Image" "Acode Master Animated Login" ✅ (customized for you)

Author:
Code Master(Mfuranziza Dusabe Hamza)

11 months ago

925

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components