Home

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

Breadcrumb

Author Ramkesh Gupta

Tailwind v3.4 882 3

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

The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

5 months ago

607
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.

KULDEEP

1 year ago

2.5k
Breadcrumb

Rajesh Maheshwari

1 year ago

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

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.6k
Breadcrumb

Laurits

3 years ago

12.1k
Breadcrum
Different styles of breadcrum component

Rajesh Maheshwari

1 year ago

1.4k
TailwindFlex – Creative Animated Home Experience
"Innovative Home with Tailwind Animated Background" "Animated Hero – TailwindFlex Design" "Smooth UI – Creative Motion with Tailwind CSS" "Home Harmony – Motion Meets Design" "TailwindFlex Home – Fluid Animation & UI"

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

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

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k
Simple Breadcrumb Example
Simple Breadcrumb Example with Light and black background options.

Sedat Kumcu

1 year ago

2.7k
ACODE,ASTER
love my projuct

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
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.

Ayyamperumal S

7 months ago

987
Breadcrumb with icon

Samuel Dawson

3 years ago

11.9k