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

500

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

Image embed in a text
This example combines text and images to create visually appealing content.

Author:
Zephyr

2 years ago

13.9k
Text gradient
very subtle gradients for beautiful headings

Author:
Mr Robot

3 years ago

12.1k
Text Animation

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

10 months ago

1.4k
Heading
Subtle Script Background - Large, very light script font in the background ("Amazing") Light-to-Dark Gradient Heading - Main heading fades from light gray to dark gray Layered Typography - Secondary heading in medium weight for contrast Elegant Divider - With centered italic text Minimalist Border Accents - Thin borders in corners for sophistication Responsive Design - Scales beautifully on all devices

Author:
KULDEEP

8 months ago

705
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.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

620
CONTACT US - GET IN TOUCH - PORTFOLIO
Responsive "Contact us" section, dark-mode-friendly contact area featuring stylish cards with icons displaying essential contact details.

Author:
ABDO-SY

1 year ago

1.8k
Heading with left border

Author:
TailwindFlex

3 years ago

14k
New Collection
A "New Collection" in fashion refers to a series of new garments and accessories designed and released by a designer or brand for a specific season (e.g., Spring/Summer, Fall/Winter). It's a carefully curated selection of items that typically share a common theme, style, or inspiration, reflecting the brand's identity and target audienc

Author:
nii fanny

8 months ago

631
Heading title

Author:
Laurits

3 years ago

19.3k
Yoga Coach Hero Section

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

1 year ago

6k
Fancy heading

Author:
Freja Jensen

3 years ago

16.4k
Text with gradient underline
Gradient Underline Text. Decorate your text with a gradient underline for a modern touch.

Author:
Anonymous

2 years ago

10.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components