No one

nice

This tailwind example is contributed by Umutoniwase Yvette, on 25-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Header

Author Umutoniwase Yvette

355

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Number Addition Calculator</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

.calculator-container {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            max-width: 500px;
            width: 100%;
            text-align: center;
            animation: slideIn 0.8s ease-out;
        }

@keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

h1 {
            color: #fff;
            margin-bottom: 30px;
            font-size: 2.5rem;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

.input-group {
            margin-bottom: 25px;
        }

label {
            display: block;
            color: #fff;
            margin-bottom: 8px;
            font-size: 1.1rem;
            font-weight: 500;
        }

input[type="number"] {
            width: 100%;
            padding: 15px 20px;
            border: none;
            border-radius: 15px;
            background: rgba(255, 255, 255, 0.15);
            color: #fff;
            font-size: 1.2rem;
            text-align: center;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

input[type="number"]:focus {
            outline: none;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
            transform: scale(1.02);
            background: rgba(255, 255, 255, 0.2);
        }

input[type="number"]::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }

.plus-symbol {
            font-size: 3rem;
            color: #fff;
            margin: 20px 0;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            animation: pulse 2s ease-in-out infinite;
        }

@keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

.calculate-btn {
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
            color: #fff;
            border: none;
            padding: 15px 40px;
            border-radius: 50px;
            font-size: 1.2rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            margin: 20px 0;
        }

.calculate-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
        }

.calculate-btn:active {
            transform: translateY(-1px);
        }

.result-container {
            margin-top: 30px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.5s ease;
        }

.result-container.show {
            opacity: 1;
            transform: translateY(0);
        }

.result-label {
            color: #fff;
            font-size: 1.1rem;
            margin-bottom: 10px;
            opacity: 0.9;
        }

.result-value {
            color: #4ecdc4;
            font-size: 2.5rem;
            font-weight: bold;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            animation: resultGlow 1s ease-out;
        }

@keyframes resultGlow {
            0% {
                opacity: 0;
                transform: scale(0.8);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

.equals-symbol {
            font-size: 2rem;
            color: #fff;
            margin: 15px 0;
            opacity: 0.8;
        }

.clear-btn {
            background: transparent;
            color: #ff6b6b;
            border: 2px solid #ff6b6b;
            padding: 10px 20px;
            border-radius: 25px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 15px;
        }

.clear-btn:hover {
            background: #ff6b6b;
            color: #fff;
            transform: scale(1.05);
        }

.history {
            margin-top: 30px;
            text-align: left;
        }

.history-title {
            color: #fff;
            font-size: 1.2rem;
            margin-bottom: 15px;
            text-align: center;
        }

.history-item {
            background: rgba(255, 255, 255, 0.05);
            padding: 10px 15px;
            margin-bottom: 8px;
            border-radius: 10px;
            color: #fff;
            font-family: monospace;
            border-left: 3px solid #4ecdc4;
            animation: fadeInLeft 0.5s ease-out;
        }

@keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

@media (max-width: 600px) {
            .calculator-container {
                padding: 30px 20px;
            }

h1 {
                font-size: 2rem;
            }

input[type="number"] {
                font-size: 1.1rem;
                padding: 12px 15px;
            }

.result-value {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="calculator-container">
        <h1>🧮 Number Adder</h1>
        
        <div class="input-group">
            <label for="num1">First Number</label>
            <input type="number" id="num1" placeholder="Enter first number" step="any">
        </div>

<div class="input-group">
            <label for="num2">Second Number</label>
            <input type="number" id="num2" placeholder="Enter second number" step="any">
        </div>

<button class="calculate-btn" onclick="addNumbers()">Calculate Sum</button>
        
        <div class="result-container" id="resultContainer">
            <div class="equals-symbol">=</div>
            <div class="result-label">Result:</div>
            <div class="result-value" id="resultValue">0</div>
            <button class="clear-btn" onclick="clearAll()">Clear All</button>
        </div>

<div class="history" id="historySection" style="display: none;">
            <div class="history-title">📝 Calculation History</div>
            <div id="historyList"></div>
            <button class="clear-btn" onclick="clearHistory()" style="display: block; margin: 15px auto 0;">Clear History</button>
        </div>
    </div>

function addNumbers() {
            // Get input values
            const num1Input = document.getElementById('num1');
            const num2Input = document.getElementById('num2');
            const num1 = parseFloat(num1Input.value);
            const num2 = parseFloat(num2Input.value);

// Validation
            if (isNaN(num1) || isNaN(num2)) {
                alert('Please enter valid numbers in both fields!');
                return;
            }

// Calculate sum
            const sum = num1 + num2;

// Display result
            const resultContainer = document.getElementById('resultContainer');
            const resultValue = document.getElementById('resultValue');
            
            resultValue.textContent = sum;
            resultContainer.classList.add('show');

// Add to history
            const calculation = `${num1} + ${num2} = ${sum}`;
            calculationHistory.unshift(calculation);
            
            // Keep only last 5 calculations
            if (calculationHistory.length > 5) {
                calculationHistory.pop();
            }

updateHistory();

// Add some visual feedback
            resultValue.style.animation = 'none';
            setTimeout(() => {
                resultValue.style.animation = 'resultGlow 1s ease-out';
            }, 10);
        }

function clearAll() {
            document.getElementById('num1').value = '';
            document.getElementById('num2').value = '';
            document.getElementById('resultContainer').classList.remove('show');
            document.getElementById('num1').focus();
        }

function clearHistory() {
            calculationHistory = [];
            document.getElementById('historySection').style.display = 'none';
        }

// Allow Enter key to calculate
        document.addEventListener('keypress', function(event) {
            if (event.key === 'Enter') {
                addNumbers();
            }
        });

// Auto-focus first input
        document.getElementById('num1').focus();

// Real-time calculation as user types (optional)
        function setupRealTimeCalculation() {
            const num1Input = document.getElementById('num1');
            const num2Input = document.getElementById('num2');
            
            function calculateOnChange() {
                const num1 = parseFloat(num1Input.value);
                const num2 = parseFloat(num2Input.value);
                
                if (!isNaN(num1) && !isNaN(num2)) {
                    const sum = num1 + num2;
                    const resultValue = document.getElementById('resultValue');
                    const resultContainer = document.getElementById('resultContainer');
                    
                    resultValue.textContent = sum;
                    resultContainer.classList.add('show');
                }
            }
            
            num1Input.addEventListener('input', calculateOnChange);
            num2Input.addEventListener('input', calculateOnChange);
        }

// Uncomment the line below if you want real-time calculation
        // setupRealTimeCalculation();
    </script>
</body>
</html>

Related Examples

section header

Author:
Raul antonio de la cruz hernandez

1 day ago

6
Software Developer
A software developer designs, builds, tests, and maintains software applications and systems. They use programming languages to create code that meets user needs and client specifications. Software developers may work on various projects, including applications, systems software, or web development

Author:
nii fanny

5 months ago

914
Hero

Author:
Aman kumar

1 year ago

6.8k
Responsive Header and Hero Section Design
Responsive Header and Hero Section Design provides flexible adaptability across all screen sizes and devices.

Author:
ABDO-SY

9 months ago

2.5k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

1 year ago

3.4k
tradition music
by salvator

Author:
Baraka Salvator

6 months ago

728
Coffee
custom

Author:
Rebecca IRANKUNDA

6 months ago

453
New Nav Component
A new navigation component

Author:
Amit PR

1 year ago

3.4k
Tailwind css banner offer
Bold neobrutalist design with thick borders, vibrant colors, and strong shadows - perfect for promotions.

Author:
saim-t8

3 months ago

392
Heade With Hero Section

Author:
Abdul Baset Bappy

5 months ago

942
Transparent Navbar

Author:
Rajesh Maheshwari

9 months ago

1.7k
Plasma
plasma

Author:
Raul antonio de la cruz hernandez

1 month ago

281

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components