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 893 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

Productivity Dashboard UI
A modern developer productivity dashboard built using HTML, Tailwind CSS, JavaScript, and Chart.js. Features a premium SaaS-style UI with analytics cards, interactive charts, kanban sprint board, developer management table, live search functionality, responsive layouts, activity feeds, and modern frontend components. Designed for frontend developers to showcase dashboard architecture, UI/UX skills, responsive design systems, and interactive web application interfaces. Includes glassmorphism styling, developer workflow management, team collaboration sections, and portfolio-ready dashboard components optimized for modern admin experiences.

Ayyamperumal S

5 months ago

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

Abhiraj

1 year ago

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.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
Africa Solex Ltd
Description (ibisobanuro bya website) ni text ngufi isobanura neza icyo urubuga cyangwa sosiyete yawe ikora, ikaba ifasha no mu byerekeye SEO (Search Engine Optimization). Mu nyandiko za HTML, description ishyirwa muri meta tag muri <head>.

Ele Eriksen

1 year ago

1.3k
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/

Hasan AlDoy (McDoy)

6 months ago

488
Breadcrum
Different styles of breadcrum component

Rajesh Maheshwari

1 year ago

1.4k
Innovative Rwanda-Canada Transport Services Website
Innovative Rwanda-Canada Transport Services Website

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.1k
Breadcrumbs
Basic navigation trail with SVG icon

Anja Müller

3 years ago

8.8k
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

6 months ago

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

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

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

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

796