Inventory Stock List Table

<!DOCTYPE html>
<title>My Example</title>

.inventory-table thead th {
    padding: 10px 12px;
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    font-weight: 600;
}

.inventory-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}
.inventory-table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Product Info Cell */
.product-info {
    display: flex;
    align-items: center;
}
.product-info .product-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-right: 15px;
    border: 1px solid #eee;
    border-radius: 4px;
    background-color: white;
}

/* For right-aligning headers and data */
.col-number {
    text-align: right;
}

/* Status Indicator Styles */
.status {
    padding: 5px 10px;
    border-radius: 15px;
    font-weight: 500;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
}
.status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
}

.status-in-stock {
    color: #1a6438;
    background-color: #e8f5e9;
}
.status-in-stock::before {
    background-color: #4caf50;
}

.status-low-stock {
    color: #936001;
    background-color: #fff8e1;
}
.status-low-stock::before {
    background-color: #ffab00;
}

.status-out-of-stock {
    color: #b71c1c;
    background-color: #ffebee;
}
.status-out-of-stock::before {
    background-color: #d32f2f;
}

</style>

<table class="inventory-table">
    <thead>
        <tr>
            <th scope="col">Product</th>
            <th scope="col">SKU</th>
            <th scope="col" class="col-number">Price</th>
            <th scope="col" class="col-number">Quantity</th>
            <th scope="col">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="product-info">
                    <img src="https://placehold.co/50?text=Product" alt="Espresso Machine" class="product-img">
                    <span>Espresso Machine</span>
                </div>
            </td>
            <td>EM-8991-A</td>
            <td class="col-number">$599.99</td>
            <td class="col-number">12</td>
            <td><span class="status status-in-stock">In Stock</span></td>
        </tr>
        <tr>
            <td>
                <div class="product-info">
                    <img src="https://placehold.co/50?text=Product" alt="Coffee Grinder" class="product-img">
                    <span>Coffee Grinder</span>
                </div>
            </td>
            <td>CG-4550-B</td>
            <td class="col-number">$89.50</td>
            <td class="col-number">4</td>
            <td><span class="status status-low-stock">Low Stock</span></td>
        </tr>
        <tr>
            <td>
                <div class="product-info">
                    <img src="https://placehold.co/50?text=Product" alt="Milk Frother" class="product-img">
                    <span>Milk Frother</span>
                </div>
            </td>
            <td>MF-2010-C</td>
            <td class="col-number">$45.00</td>
            <td class="col-number">0</td>
            <td><span class="status status-out-of-stock">Out of Stock</span></td>
        </tr>
         <tr>
            <td>
                <div class="product-info">
                    <img src="https://placehold.co/50?text=Product" alt="12oz Coffee Mugs (Set of 4)" class="product-img">
                    <span>12oz Coffee Mugs (Set of 4)</span>
                </div>
            </td>
            <td>CM-1204-D</td>
            <td class="col-number">$24.99</td>
            <td class="col-number">45</td>
            <td><span class="status status-in-stock">In Stock</span></td>
        </tr>
    </tbody>
</table>