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

218

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

Responsive Navbar with search profile options

Author:
Rajesh Maheshwari

5 months ago

1.4k
Promotional sticky top section

Author:
Leon Bachmann

2 years ago

11.9k
Tailwind Pricing Section 2
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

1 year ago

1.7k
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

663
Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Author:
Rathanak Phan

2 months ago

478
Animated Title
App Logo or Main Title

Author:
khalidrootdevs

1 year ago

6.7k
sticky headings
sticky headings

Author:
Anonymous

1 year ago

5.8k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

8 months ago

3.3k
page heaading stacked
yeah booy, oh booy, o buy

Author:
Anonymous

1 year ago

9.2k
SocialConnect - Stay Connected
SocialConnect - Stay Connected

Author:
Uwera Dorcas

2 months ago

298
Shrinkable Header
A shrinkable header with responsive menu using a little bit of plain javascript

Author:
farid

8 months ago

883
Home
html , css

Author:
Hacker Development

3 months ago

322

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components