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

278

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

Enhanced Modern Navbar
The navbar now feels premium and modern while maintaining all original functionality. The glassmorphism effect, smooth animations, and professional styling create a cutting-edge user experience that would fit perfectly on any modern website!

Author:
Rathanak Phan

4 months ago

572
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Author:
Nicole Shalom

5 months ago

779
home
html , css

Author:
Hacker Development

5 months ago

1.5k
Africa Solex Ltd
Description (ibisobanuro bya website) ni text ngufi isobanura neza icyo urubuga cyangwa sosiyete yawe ikora, ikaba ifasha no mu byerekeye SEO (Search Engine Optimization). Mu nyandiko za HTML, description ishyirwa muri meta tag muri <head>.

Author:
Ele Eriksen

5 months ago

353
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

2 months ago

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

5 months ago

856
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

5 months ago

665
Real Estate Website • Hero Section
polished, professional Hero section

Author:
UI-Templates

2 weeks ago

68
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

5 months ago

737
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.1k
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

5 months ago

1.1k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

166

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components