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

390

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

Job Platfoam
If you need a Job You will Have to Apply for it

Author:
soft mind

7 months ago

723
Portfolio Hero Section 1
visually stunning and captivating hero section component for your portfolio website.

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

1 year ago

5.4k
Header with logo, menu and buttons
Header with logo, menu and buttons. If you want to toggle the visibility of the mobile menu when clicking on the hamburger menu icon you can achieve this with JavaScript by adding and removing a class that controls the visibility of the mobile menu

Author:
Mike Varen

1 year ago

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

6 months ago

960
Navbar
Navbar

Author:
TakaMorY

4 months ago

518
Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

1 year ago

7.8k
PrimeCorp | Professional Business Solutions
We deliver cutting-edge business solutions through strategic consulting, tailored services, and continuous support. Partner with us to optimize operations, drive growth, and achieve sustainable success in today's competitive market.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

800
Responsive Tailwind CSS Header with Navigation & Buttons | Ready to Use
A fully responsive and modern header built with Tailwind CSS. Features a sleek navigation menu, login/register buttons, and adaptive design for all screen sizes. Open-source and easy to integrate into any web project!

Author:
Abdul Baset Bappy

9 months ago

2k
3D Animation Studio
3D animation is the process of creating three-dimensional products, objects, backgrounds, etc., and setting them in motion within a digital environment. It's commonly used for the web, social media marketing, product design, film, cartoons, commercials, and video games.

Author:
Nicole Shalom

7 months ago

1.3k
navigation header
responsive navigation header

Author:
Abid Ullah

1 year ago

2.5k
yvette
is good

Author:
Umutoniwase Yvette

7 months ago

637
Responsive NavBar Using CSS Only
A complete responsive navbar only using tailwind css

Author:
Shivam Vishwakarma

6 months ago

402

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components