eCommerce Customer Profile Dashboard with Wishlist & Orders

A modern customer profile dashboard built with HTML, Tailwind CSS, and vanilla JavaScript. It includes an editable profile section, order history, wishlist management, product reviews, tabbed navigation, responsive sidebar, toast notifications, and clean eCommerce-inspired UI. Perfect for online stores, marketplaces, customer portals, account management systems, and shopping applications.

This tailwind example is contributed by JUGENDRA GANGWAR, on 14-Jul-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Author box, User information,Admin Dashboard, User dashboard,Toast, Snackbar

Profile Dashboard Notification

Author JUGENDRA GANGWAR

Tailwind v3.4 295 2

Fork Fullscreen

<div data-tab="orders" class="tab-btn px-4 py-3 cursor-pointer flex items-center gap-3 text-sm text-gray-700 hover:bg-gray-50">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
          My Orders
        </div>

<div data-tab="wishlist" class="tab-btn px-4 py-3 cursor-pointer flex items-center gap-3 text-sm text-gray-700 hover:bg-gray-50">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
          Wishlist
        </div>

<div data-tab="reviews" class="tab-btn px-4 py-3 cursor-pointer flex items-center gap-3 text-sm text-gray-700 hover:bg-gray-50">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="7"/><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/></svg>
          Reviews &amp; Ratings
        </div>

<div data-tab="account" class="tab-btn px-4 py-3 cursor-pointer flex items-center gap-3 text-sm bg-blue-50 text-blue-600 font-medium">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
          Account Settings
        </div>
      </div>
    </div>
  </div>

<div id="tab-account" class="tab-panel">
        <div class="p-6 border-b">
          <div class="flex justify-between items-center">
            <h2 class="text-xl font-semibold text-gray-800">Personal Information</h2>
            <div id="edit-btn-wrap">
              <button id="edit-btn" class="text-blue-600 hover:text-blue-800 font-medium text-sm flex items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                Edit
              </button>
            </div>
            <div id="save-cancel-wrap" class="hidden flex gap-2">
              <button id="save-btn" class="bg-blue-600 text-white px-4 py-2 text-sm rounded hover:bg-blue-700 transition-colors flex items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
                Save
              </button>
              <button id="cancel-btn" class="bg-gray-500 text-white px-4 py-2 text-sm rounded hover:bg-gray-600 transition-colors flex items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                Cancel
              </button>
            </div>
          </div>
        </div>

<div class="p-6">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="md:col-span-2 flex items-center gap-6 pb-6 border-b">
              <img id="main-avatar" src="https://lh3.googleusercontent.com/a/ACg8ocITatn1cnYva1c39UKTjYWFLLXk0VXTYoYeP3lYn-9wnCV-m8uQ=s96-c" alt="Jugendra"
                   class="w-24 h-24 rounded-full object-cover border-4 border-gray-200" />
              <div class="flex-1">
                <input id="avatar-input" type="url"
                       class="hidden w-full p-3 border border-gray-300 rounded focus:outline-none focus:border-blue-500"
                       placeholder="Profile image URL" value="https://i.pravatar.cc/150?img=12" />
                <div id="avatar-display">
                  <h3 id="display-name" class="text-lg font-medium text-gray-800">Jugendra</h3>
                  <p id="display-username" class="text-gray-600">@jugendra.gangwar</p>
                  <div class="mt-2">
                    <span class="inline-block px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                      ● Online
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">Full Name</label>
              <input id="fullname-input" type="text"
                     class="hidden w-full p-3 border border-gray-300 rounded focus:outline-none focus:border-blue-500"
                     placeholder="Enter your full name" value="Jugendra" />
              <div id="fullname-display" class="p-3 bg-gray-50 border border-gray-200 rounded text-gray-800">
                Jugendra
              </div>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">Username</label>
              <input id="username-input" type="text"
                     class="hidden w-full p-3 border border-gray-300 rounded focus:outline-none focus:border-blue-500"
                     placeholder="Enter username" value="aarav.gangwar" />
              <div id="username-display" class="p-3 bg-gray-50 border border-gray-200 rounded text-gray-800">
                @jugendra.gangwar
              </div>
            </div>
            <div class="md:col-span-2">
              <label class="block text-sm font-medium text-gray-700 mb-2">Email Address</label>
              <div class="p-3 bg-gray-50 border border-gray-200 rounded text-gray-800 flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                jugendra.gangwar@example.com
              </div>
            </div>

</div>
        </div>
      </div>
      <div id="tab-orders" class="tab-panel hidden p-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">My Orders</h2>
        <div id="orders-list" class="space-y-4"></div>
      </div>
      <div id="tab-wishlist" class="tab-panel hidden">
        <div class="mx-auto px-4 py-4">
          <div id="wishlist-empty" class="hidden flex-col items-center justify-center text-center py-12">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-24 h-24 text-gray-300 mb-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
            <p class="text-gray-500">Your wishlist is empty.</p>
          </div>
          <div id="wishlist-grid" class="grid gap-6 sm:grid-cols-2 md:grid-cols-3"></div>
        </div>
      </div>
      <div id="tab-reviews" class="tab-panel hidden p-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">Reviews &amp; Ratings</h2>
        <div id="reviews-list" class="space-y-5"></div>
      </div>

</div>
  </div>
</div>
<script>
  let wishlist = [
    {
      id: "p1",
      name: "Wireless Over-Ear Headphones",
      price: 2499,
      image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&q=80",
    },
    {
      id: "p2",
      name: "Minimalist Analog Watch",
      price: 1899,
      image: "https://images.unsplash.com/photo-1524805444758-089113d48a6d?w=400&q=80",
    },
    {
      id: "p3",
      name: "Canvas Backpack",
      price: 1299,
      image: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=400&q=80",
    },
    {
      id: "p4",
      name: "Stainless Steel Water Bottle",
      price: 699,
      image: "https://images.unsplash.com/photo-1602143407151-7111542de6e8?w=400&q=80",
    },
  ];

const orders = [
    {
      id: "ORD-10234",
      date: "June 28, 2026",
      status: "Delivered",
      total: 3798,
      items: [
        { name: "Wireless Over-Ear Headphones", qty: 1, image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=200&q=80" },
        { name: "Canvas Backpack", qty: 1, image: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=200&q=80" },
      ],
    },
    {
      id: "ORD-10198",
      date: "June 10, 2026",
      status: "Shipped",
      total: 1899,
      items: [
        { name: "Minimalist Analog Watch", qty: 1, image: "https://images.unsplash.com/photo-1524805444758-089113d48a6d?w=200&q=80" },
      ],
    },
    {
      id: "ORD-10142",
      date: "May 22, 2026",
      status: "Cancelled",
      total: 699,
      items: [
        { name: "Stainless Steel Water Bottle", qty: 1, image: "https://images.unsplash.com/photo-1602143407151-7111542de6e8?w=200&q=80" },
      ],
    },
  ];

const reviews = [
    {
      product: "Wireless Over-Ear Headphones",
      rating: 5,
      date: "July 1, 2026",
      comment: "Excellent sound quality and battery life easily lasts two days. Very comfortable for long wear.",
    },
    {
      product: "Minimalist Analog Watch",
      rating: 4,
      date: "June 15, 2026",
      comment: "Looks premium for the price. Strap could be softer, but overall very happy with the purchase.",
    },
    {
      product: "Canvas Backpack",
      rating: 5,
      date: "May 30, 2026",
      comment: "Sturdy build, fits a 15-inch laptop with room to spare. Great for daily commutes.",
    },
  ];

const trashIconSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"/></svg>`;
  function renderWishlist() {
    const grid = document.getElementById("wishlist-grid");
    const empty = document.getElementById("wishlist-empty");
    grid.innerHTML = "";

if (wishlist.length === 0) {
      empty.classList.remove("hidden");
      empty.classList.add("flex");
      return;
    }
    empty.classList.add("hidden");
    empty.classList.remove("flex");

wishlist.forEach((item) => {
      const card = document.createElement("div");
      card.className = "bg-white p-2 relative group border border-gray-200 rounded flex flex-col";
      card.innerHTML = `
        <div class="overflow-hidden cursor-pointer">
          <img src="${item.image}" alt="${item.name}" loading="lazy" class="h-52 w-full object-contain" />
        </div>
        <h2 class="mt-2 text-sm font-medium text-gray-800">${item.name}</h2>
        <span class="text-gray-600">₹${item.price}</span>
        <button data-id="${item.id}" class="remove-btn mt-4 w-full bg-red-500 text-white py-2 px-4 hover:bg-red-600 transition-colors duration-200 flex items-center justify-center gap-2 rounded">
          ${trashIconSVG}
          Remove
        </button>
      `;
      grid.appendChild(card);
    });

function statusBadge(status) {
    const map = {
      Delivered: "bg-green-100 text-green-800",
      Shipped: "bg-blue-100 text-blue-800",
      Cancelled: "bg-red-100 text-red-800",
      Processing: "bg-yellow-100 text-yellow-800",
    };
    return map[status] || "bg-gray-100 text-gray-800";
  }

function renderOrders() {
    const list = document.getElementById("orders-list");
    list.innerHTML = "";

orders.forEach((order) => {
      const itemsHTML = order.items
        .map(
          (it) => `
        <div class="flex items-center gap-3">
          <img src="${it.image}" alt="${it.name}" class="w-12 h-12 rounded object-cover border border-gray-200" />
          <div>
            <p class="text-sm text-gray-800">${it.name}</p>
            <p class="text-xs text-gray-500">Qty: ${it.qty}</p>
          </div>
        </div>`
        )
        .join("");

function renderReviews() {
    const list = document.getElementById("reviews-list");
    list.innerHTML = "";

reviews.forEach((rev) => {
      const card = document.createElement("div");
      card.className = "border border-gray-200 rounded p-4";
      card.innerHTML = `
        <div class="flex flex-wrap justify-between items-center gap-2 mb-2">
          <p class="text-sm font-medium text-gray-800">${rev.product}</p>
          <span class="text-xs text-gray-500">${rev.date}</span>
        </div>
        ${starRow(rev.rating)}
        <p class="text-sm text-gray-600 mt-2">${rev.comment}</p>
      `;
      list.appendChild(card);
    });
  }

function showToast(message, type = "success") {
    const container = document.getElementById("toast-container");
    const toast = document.createElement("div");
    const bg = type === "success" ? "bg-green-600" : "bg-red-600";
    toast.className = `toast ${bg} text-white px-4 py-3 rounded shadow-lg text-sm`;
    toast.textContent = message;
    container.appendChild(toast);
    setTimeout(() => toast.remove(), 2000);
  }

const tabButtons = document.querySelectorAll(".tab-btn");
  const tabPanels = document.querySelectorAll(".tab-panel");

tabButtons.forEach((btn) => {
    btn.addEventListener("click", () => {
      const target = btn.getAttribute("data-tab");

tabButtons.forEach((b) => {
        b.classList.remove("bg-blue-50", "text-blue-600", "font-medium");
        b.classList.add("text-gray-700");
      });
      btn.classList.add("bg-blue-50", "text-blue-600", "font-medium");
      btn.classList.remove("text-gray-700");

tabPanels.forEach((p) => p.classList.add("hidden"));
      document.getElementById(`tab-${target}`).classList.remove("hidden");
    });
  });

const editBtnWrap = document.getElementById("edit-btn-wrap");
  const saveCancelWrap = document.getElementById("save-cancel-wrap");

const fullnameDisplay = document.getElementById("fullname-display");
  const fullnameInput = document.getElementById("fullname-input");
  const usernameDisplay = document.getElementById("username-display");
  const usernameInput = document.getElementById("username-input");
  const avatarDisplay = document.getElementById("avatar-display");
  const avatarInput = document.getElementById("avatar-input");
  const mainAvatar = document.getElementById("main-avatar");
  const sidebarAvatar = document.getElementById("sidebar-avatar");
  const sidebarName = document.getElementById("sidebar-name");
  const displayName = document.getElementById("display-name");
  const displayUsername = document.getElementById("display-username");

let original = {
    fullName: fullnameInput.value,
    username: usernameInput.value,
    avatar: avatarInput.value,
  };

function toggleEdit(isEditing) {
    editBtnWrap.classList.toggle("hidden", isEditing);
    saveCancelWrap.classList.toggle("hidden", !isEditing);
    saveCancelWrap.classList.toggle("flex", isEditing);

fullnameDisplay.classList.toggle("hidden", isEditing);
    fullnameInput.classList.toggle("hidden", !isEditing);

usernameDisplay.classList.toggle("hidden", isEditing);
    usernameInput.classList.toggle("hidden", !isEditing);

avatarDisplay.classList.toggle("hidden", isEditing);
    avatarInput.classList.toggle("hidden", !isEditing);
  }

document.getElementById("edit-btn").addEventListener("click", () => toggleEdit(true));

document.getElementById("cancel-btn").addEventListener("click", () => {
    fullnameInput.value = original.fullName;
    usernameInput.value = original.username;
    avatarInput.value = original.avatar;
    toggleEdit(false);
  });

document.getElementById("save-btn").addEventListener("click", () => {
    original = {
      fullName: fullnameInput.value,
      username: usernameInput.value,
      avatar: avatarInput.value,
    };

fullnameDisplay.textContent = original.fullName;
    usernameDisplay.textContent = `@${original.username}`;
    displayName.textContent = original.fullName;
    displayUsername.textContent = `@${original.username}`;
    sidebarName.textContent = original.fullName;
    mainAvatar.src = original.avatar;
    sidebarAvatar.src = original.avatar;

toggleEdit(false);
    showToast("Profile updated successfully", "success");
  });

renderWishlist();
  renderOrders();
  renderReviews();
</script>

Related Examples

Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

ABDESLAMI ACHRAF

2 years ago

4.6k
canvas fully covers
canvas fully covers

ABDESLAMI ACHRAF

1 year ago

5.1k
canvas fully covers
canvas fully covers

Balogun David Olajuwon

1 year ago

1.2k
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Ijila Itunu

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

1k
Engineering Project Dashboard
Track engineering assignments, project progress, technology stack, and delivery timelines in one simple dashboard.

Ayyamperumal S

6 months ago

515
Admin Panel
Source https://gist.github.com/visualval/8aaaad794256313fa2310b997e8a9b8f

Lior Medan

2 years ago

3.8k
Hero

ORGIN_DREAMS

1 year ago

2.2k
Subcribe Card - Alert - Notification

ABDO-SY

1 year ago

1.2k
Author box

Mr Robot

3 years ago

12.5k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Ayyamperumal S

1 year ago

3.2k
Minimal Profile card

Abhijit Sen

3 years ago

12.3k