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

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

8 months ago

652
Heading title

Author:
Laurits

3 years ago

19.2k
A Code Master Academy
A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda 👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

1.1k
Hero Section
Home hero section search bar

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

1 year ago

7.8k
Animated Text Rotator | Smooth Tailwindcss Text Transition Effects
Beautiful animated text rotation component with smooth fade transitions. Perfect for hero sections, showcasing features, and engaging website visitors with dynamic content.

Author:
Homayoun

2 months ago

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

8 months ago

611
Fancy underline

Author:
Simon Scheffer

3 years ago

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

Author:
KULDEEP

7 months ago

1k
Yoga Coach Hero Section

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

1 year ago

5.8k
Underline Gradient
underlined gradient using background color

Author:
Nikolai

1 year ago

2.9k
Heading Style

Author:
KULDEEP

7 months ago

506
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

7 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components