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

220

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

Dark mode sidenav with collapsible menu

Author:
Rajesh Maheshwari

6 months ago

747
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

4 months ago

587
home page
Hero Section: Gradient background with noise texture Animated floating image Gradient text effect Call-to-action buttons Features Section: Three feature cards with gradient headers Hover animations Clean iconography Stats Display: Full-width gradient background Clean stat presentation Testimonials: Three testimonial cards with user avatars Star ratings Border accents Hover scaling effects Call-to-Action (CTA) Section: Gradient background Centered content Multiple action buttons Footer: Four-column layout Social media icons Newsletter signup Copyright information Design Features: Vibrant gradient color scheme Smooth hover animations and transitions Responsive layout for all screen sizes Modern typography Subtle floating animations Clean, card-based design

Author:
ishimwe prince

3 months ago

532
vanessa
nice

Author:
Umutoniwase Yvette

3 months ago

296
Yoga Coach Hero Section

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

1 year ago

5.1k
Transparent Navbar

Author:
Rajesh Maheshwari

6 months ago

1.5k
Book
nice kbx

Author:
Umutoniwase Yvette

3 months ago

260
Collapsible Sidebar Menu

Author:
Rajesh Maheshwari

6 months ago

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

3 months ago

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

Author:
farid

9 months ago

948
Markert shop
wellcome tothe my online shoping

Author:
Umutoniwase Yvette

3 months ago

101
ACODE MASTER — Cyberpunk Full Stack Developer from Rwanda
"I’m ACODE MASTER — a visionary Full Stack Developer from Rwanda, blending cutting-edge tech with bold design. I specialize in building modern web applications using React, Node.js, and TailwindCSS, inspired by the cyberpunk aesthetic and driven by a passion for digital innovation. Welcome to the future of code."

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

996

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components