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

224

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

Header with svg background

Author:
R.P Ketan

2 years ago

13.2k
Heading design

Author:
Emily Tan

2 years ago

11.4k
Glowing text
Glowing text for headings

Author:
Pixel Perfect

1 year ago

11.2k
Hero Section
Home hero section search bar

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

1 year ago

7.1k
Multicolor heading

Author:
Sienna

2 years ago

8.2k
Text Animation

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

4 months ago

717
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)

3 months ago

264
vav bar
html , css

Author:
Hacker Development

3 months ago

469
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

6 months ago

1k
Heading example

Author:
Freja Jensen

2 years ago

9.3k
Heading title

Author:
Laurits

2 years ago

18.6k
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

2 months ago

142

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components