Home
Nirere Esther
paying taxes

paying taxes

Tonny#_paying taxes in marketing Product and good

This tailwind example is contributed by Nirere Esther, on 29-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Typography, Title, h1, h2, h3

Heading

Author Nirere Esther

225

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Tax Payment System</title>
    <style>
        /* CSS Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }

.container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

header {
            background-color: #2c3e50;
            color: white;
            padding: 20px 0;
            text-align: center;
            margin-bottom: 30px;
            border-radius: 5px;
        }

h1 {
            font-size: 2.2rem;
        }

.tax-calculator {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 30px;
            margin-bottom: 30px;
        }

.form-group {
            margin-bottom: 20px;
        }

label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
        }

input, select {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            transition: border 0.3s;
        }

input:focus, select:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }

.btn {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 12px 20px;
            font-size: 16px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

.btn:hover {
            background-color: #2980b9;
        }

.tax-results {
            background-color: #f8f9fa;
            border-left: 4px solid #3498db;
            padding: 20px;
            margin-top: 20px;
            border-radius: 4px;
            display: none;
        }

.tax-results h3 {
            color: #2c3e50;
            margin-bottom: 15px;
        }

.result-item {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }

.result-item:last-child {
            border-bottom: none;
            font-weight: bold;
            color: #2c3e50;
        }

.tax-info {
            background-color: #e8f4fc;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
        }

.tax-info h2 {
            color: #2c3e50;
            margin-bottom: 15px;
        }

.tax-info p {
            margin-bottom: 10px;
        }

footer {
            text-align: center;
            padding: 20px;
            color: #7f8c8d;
            font-size: 14px;
        }

@media (max-width: 768px) {
            .container {
                padding: 10px;
            }
            
            h1 {
                font-size: 1.8rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Product Tax Payment System</h1>
            <p>Calculate and pay taxes for your products</p>
        </header>

<section class="tax-info">
            <h2>Tax Information</h2>
            <p>This system helps you calculate the applicable taxes for your products based on current tax rates.</p>
            <p>Standard tax rates: 10% for goods, 8% for services, with possible exemptions for essential items.</p>
        </section>

<section class="tax-calculator">
            <h2>Tax Calculator</h2>
            <form id="taxForm">
                <div class="form-group">
                    <label for="productName">Product Name</label>
                    <input type="text" id="productName" placeholder="Enter product name" required>
                </div>

<div class="form-group">
                    <label for="productType">Product Type</label>
                    <select id="productType" required>
                        <option value="">Select product type</option>
                        <option value="goods">Goods</option>
                        <option value="services">Services</option>
                        <option value="essential">Essential Goods (Exempt)</option>
                        <option value="luxury">Luxury Goods</option>
                    </select>
                </div>

<div class="form-group">
                    <label for="productPrice">Product Price ($)</label>
                    <input type="number" id="productPrice" placeholder="Enter product price" min="0" step="0.01" required>
                </div>

<div class="form-group">
                    <label for="quantity">Quantity</label>
                    <input type="number" id="quantity" placeholder="Enter quantity" min="1" value="1" required>
                </div>

<button type="button" class="btn" onclick="calculateTax()">Calculate Tax</button>
            </form>

<div class="tax-results" id="taxResults">
                <h3>Tax Calculation Results</h3>
                <div class="result-item">
                    <span>Product:</span>
                    <span id="resultProduct">-</span>
                </div>
                <div class="result-item">
                    <span>Base Price:</span>
                    <span id="resultBasePrice">$0.00</span>
                </div>
                <div class="result-item">
                    <span>Quantity:</span>
                    <span id="resultQuantity">1</span>
                </div>
                <div class="result-item">
                    <span>Subtotal:</span>
                    <span id="resultSubtotal">$0.00</span>
                </div>
                <div class="result-item">
                    <span>Tax Rate:</span>
                    <span id="resultTaxRate">0%</span>
                </div>
                <div class="result-item">
                    <span>Tax Amount:</span>
                    <span id="resultTaxAmount">$0.00</span>
                </div>
                <div class="result-item">
                    <span>Total Amount:</span>
                    <span id="resultTotal">$0.00</span>
                </div>
            </div>
        </section>

Related Examples

Fancy heading

Author:
Freja Jensen

2 years ago

15.9k
Heading

Author:
KULDEEP

2 months ago

417
Modern Neon Gradient with Diagonal Script
(Purple/Blue/Pink Color Scheme)

Author:
KULDEEP

3 months ago

340
Text gradient
very subtle gradients for beautiful headings

Author:
Mr Robot

3 years ago

11.6k
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

2 months ago

674
Fancy heading with borders

Author:
Freja Jensen

2 years ago

10.9k
Heading with gradient

Author:
Prajwal Hallale

2 years ago

9.4k
Transparent text
transparent text over the image

Author:
Anonymous

2 years ago

9.7k
Welcome to Cinema
The design captures the magic and glamour of cinema with a modern, interactive interface that would definitely make users stop scrolling and say "whoa!" The color scheme uses cinematic blacks and golds with vibrant accent colors, while the animations bring the interface to life without overwhelming the content

Author:
Augustin

3 months ago

427
first draft for color correction
Adiman appears to be a name or term that could have multiple interpretations depending on context. Since you're using it for a dashboard system, here are the possible definitions and how we can frame it:

Author:
Mitchrey Dablo

2 months ago

312
Heading with left border

Author:
TailwindFlex

3 years ago

13.5k
Text Animation

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

5 months ago

766

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components