Contact form Modern

This tailwind example is contributed by Alif Bima Pradana, on 07-Feb-2026. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Get in touch, Contact form

Form Contact us

Author Alif Bima Pradana

Tailwind v3.4 1.1k 1

Fork Fullscreen

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Contact Form</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        'sans': ['Inter', 'sans-serif'],
                        'display': ['Space Grotesk', 'sans-serif'],
                    },
                    colors: {
                        primary: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e' },
                        secondary: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75' },
                        accent: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12' },
                    },
                    animation: {
                        'float': 'float 6s ease-in-out infinite',
                        'glow': 'glow 2s ease-in-out infinite alternate',
                        'slide-up': 'slideUp 0.5s ease-out',
                        'fade-in': 'fadeIn 0.6s ease-out',
                    },
                    keyframes: {
                        float: { '0%, 100%': { transform: 'translateY(0px)' }, '50%': { transform: 'translateY(-20px)' } },
                        glow: { '0%': { boxShadow: '0 0 20px rgba(99, 102, 241, 0.4)' }, '100%': { boxShadow: '0 0 40px rgba(99, 102, 241, 0.8)' } },
                        slideUp: { '0%': { opacity: '0', transform: 'translateY(30px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } },
                        fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' } },
                    },
                    backdropBlur: { xs: '2px' },
                }
            }
        }
    </script>
    <style>
        .glass { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); }
        .gradient-text { background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .shadow-glow { box-shadow: 0 0 40px rgba(99, 102, 241, 0.1); }
        .btn-premium { transition: all 0.3s ease; }
        .btn-premium:hover { transform: translateY(-2px); }
        input:focus, textarea:focus { box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5); }
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s ease; }
        .reveal.active { opacity: 1; transform: translateY(0); }
    </style>
</head>
<body class="bg-slate-950 min-h-screen flex items-center justify-center p-4 md:p-8">
    <section class="w-full max-w-2xl glass rounded-2xl p-8 md:p-12 shadow-glow reveal">
        <div class="mb-10 text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-2 gradient-text">Contact Us</h2>
            <p class="text-gray-400">We'd love to hear from you!</p>
        </div>

<div>
                    <label class="block text-sm font-medium mb-2 text-gray-300">Email Address</label>
                    <div class="relative">
                        <input type="email" class="w-full bg-gray-900/50 border border-gray-800 rounded-xl py-3 px-4 focus:outline-none focus:border-primary-500 transition-all" placeholder="johndoe@example.com">
                        <i class="fa-regular fa-envelope absolute right-4 top-1/2 -translate-y-1/2 text-gray-500"></i>
                    </div>
                </div>
            </div>

<div>
                <label class="block text-sm font-medium mb-2 text-gray-300">Subject</label>
                <div class="relative">
                    <input type="text" class="w-full bg-gray-900/50 border border-gray-800 rounded-xl py-3 px-4 focus:outline-none focus:border-primary-500 transition-all" placeholder="How can we help?">
                    <i class="fa-regular fa-comment-dots absolute right-4 top-1/2 -translate-y-1/2 text-gray-500"></i>
                </div>
            </div>

<div>
                <label class="block text-sm font-medium mb-2 text-gray-300">Message</label>
                <textarea class="w-full bg-gray-900/50 border border-gray-800 rounded-xl py-3 px-4 focus:outline-none focus:border-primary-500 transition-all h-32 resize-none" placeholder="Write your message here..."></textarea>
            </div>

<button class="w-full btn-premium bg-gradient-to-r from-primary-600 to-secondary-600 hover:from-primary-700 hover:to-secondary-700 text-white py-3 px-6 rounded-xl font-semibold shadow-lg hover:shadow-xl transition-all duration-300">
                Send Message
                <i class="fa-regular fa-paper-plane ml-2"></i>
            </button>
        </form>

<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
            <div class="glass p-6 rounded-xl hover:bg-gray-900/20 transition-all">
                <i class="fa-solid fa-phone text-3xl mb-4 text-primary-500"></i>
                <h4 class="font-semibold mb-2">Call Us</h4>
                <p class="text-gray-400 text-sm">+1 (555) 123-4567</p>
            </div>
            <div class="glass p-6 rounded-xl hover:bg-gray-900/20 transition-all">
                <i class="fa-solid fa-envelope text-3xl mb-4 text-secondary-500"></i>
                <h4 class="font-semibold mb-2">Email Us</h4>
                <p class="text-gray-400 text-sm">support@company.com</p>
            </div>
            <div class="glass p-6 rounded-xl hover:bg-gray-900/20 transition-all">
                <i class="fa-solid fa-location-dot text-3xl mb-4 text-accent-500"></i>
                <h4 class="font-semibold mb-2">Visit Us</h4>
                <p class="text-gray-400 text-sm">New York, USA</p>
            </div>
        </div>
    </section>