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

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

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

4 weeks ago

82
Fancy heading with borders

Author:
Freja Jensen

2 years ago

10.6k
Fancy underline

Author:
Simon Scheffer

2 years ago

11.5k
Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

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

1 year ago

3.7k
Header with svg background

Author:
R.P Ketan

2 years ago

12.8k
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)

1 month ago

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

Author:
KULDEEP

6 days ago

9
Heading Style

Author:
KULDEEP

3 weeks ago

129
vav bar
html , css

Author:
Hacker Development

1 month ago

150
Multicolor heading

Author:
Sienna

2 years ago

8k
Section Heading
A gorgeous section heading with a smooth blur element.

Author:
Coastal UI

7 months ago

1k
iCAMS
iCAMS stands for Integrated Campus Management System — a centralized digital platform designed to streamline and automate the administrative, academic, and operational functions of an educational institution

Author:
Augustin

1 month ago

203

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components