Inventory Management POS systems are now an essential part of modern businesses such as bookshops, supermarkets, and bakeries. Instead of calculating bills on a piece of paper, we can now process large-scale billing within just 2–3 minutes. This saves both time and effort, reducing stress during busy hours. That’s why this system has become so popular in today’s generation.
In this tutorial, you will learn step by step how to create a simple inventory management system using Tailwind CSS. This project is perfect for anyone interested in learning Tailwind CSS through a practical, hands-on exercise.
If you’re looking for a Tailwind CSS or JavaScript project that’s both educational and practical, this one is perfect for you.
Learn how to create an Inventory Management POS System step by step.
First, go to the official Tailwind CSS website: https://tailwindcss.com/ and copy the Tailwind CSS bundle.css style copy from the cdn of tailwind css. Then, paste it inside the <head> tag of your HTML page.
After that, paste the following code inside the <body> tag. Once done, install the Live Server extension and click “Go Live” to run your project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class=" bg-gray-100 min-h-screen flex items-center justify-center" >
<div class="w-full max-w-4xl bg-white p-8 rounded-2xl shadow-lg">
<h2 class="text-2xl font-bold mb-6 text-center text-blue-600">Product Billing System</h2>
<div class="grid grid-cols-4 gap-4 mb-4">
<div>
<label class="block mb-2 text-sm font-medium text-gray-900">Product ID</label>
<input type="text" id="id"
class="w-full p-2 border rounded-lg text-sm focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label class="block mb-2 text-sm font-medium text-gray-900">Product Name</label>
<input type="text" id="Pname"
class="w-full p-2 border rounded-lg text-sm focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label class="block mb-2 text-sm font-medium text-gray-900">Quantity</label>
<input type="number" id="Qty"
class="w-full p-2 border rounded-lg text-sm focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label class="block mb-2 text-sm font-medium text-gray-900">Price</label>
<input type="number" id="Price"
class="w-full p-2 border rounded-lg text-sm focus:ring-blue-500 focus:border-blue-500">
</div>
</div>
<div class="flex justify-end mb-5">
<button onclick="addProduct()"
class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition">Add Product</button>
</div>
<!-- Table -->
<div class="overflow-x-auto mb-6">
<table class="w-full text-sm text-left border-collapse border border-gray-200">
<thead class="bg-gray-200">
<tr>
<th class="px-5 py-3 border-b">Product ID</th>
<th class="px-5 py-3 border-b">Product Name</th>
<th class="px-5 py-3 border-b">Qty</th>
<th class="px-5 py-3 border-b">Price</th>
<th class="px-5 py-3 border-b">Total</th>
</tr>
</thead>
<tbody id="TableProduct">
</tbody>
</table>
</div>
<div class="grid grid-cols-3 gap-4">
<div>
<label class="block mb-2 text-sm font-medium text-gray-900">Subtotal</label>
<input type="text" id="subTotal" readonly class="w-full p-2 border rounded-lg text-sm bg-gray-100">
</div>
<div>
<label class="block mb-2 text-sm font-medium text-gray-900">Payment</label>
<input type="text" id="Payment" oninput="calculateBalance()" class="w-full p-2 border rounded-lg text-sm">
</div>
<div>
<label class="block mb-2 text-sm font-medium text-gray-900">Balance</label>
<input type="text" id="Balance" readonly class="w-full p-2 border rounded-lg text-sm bg-gray-100">
</div>
</div>
</div>
<script>
let subTotal = 0;
const products = [];
function addProduct() {
const id = document.getElementById('id').value.trim();
const Pname = document.getElementById('Pname').value.trim();
const Qty = document.getElementById('Qty').value.trim();
const Price = document.getElementById('Price').value.trim();
if (id === "" || Pname === "" || Qty === "" || Price === "") {
alert("Please fill all fields!");
return;
}
const total = Number(Qty) * Number(Price);
const table = document.getElementById("TableProduct");
const row = document.createElement("tr");
row.innerHTML = `
<td class="px-5 py-3">${id}</td>
<td class="px-5 py-3">${Pname}</td>
<td class="px-5 py-3">${Qty}</td>
<td class="px-5 py-3">${Price}</td>
<td class="px-5 py-3 font-semibold">${total.toFixed(2)}</td>
`;
table.appendChild(row);
subTotal += total;
products.push({ id, Pname, Qty, Price, total });
document.getElementById('subTotal').value = subTotal.toFixed(2);
document.getElementById('id').value = "";
document.getElementById('Pname').value = "";
document.getElementById('Qty').value = "";
document.getElementById('Price').value = "";
calculateBalance();
}
function calculateBalance() {
const payment = parseFloat(document.getElementById("Payment").value) || 0;
const balance = payment - subTotal;
const balanceField = document.getElementById("Balance");
balanceField.value = balance.toFixed(2);
if (balance < 0) {
balanceField.classList.add("text-red-600");
balanceField.classList.remove("text-green-600");
} else {
balanceField.classList.add("text-green-600");
balanceField.classList.remove("text-red-600");
}
}
</script>
</body>
</html>I have attached the video below. Please watch the video and do the work.