Free SEO Audit & Analysis Tool

Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

This tailwind example is contributed by MD Mostafa Niloy, on 16-Nov-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Frequently asked questions, QnA

Card FAQ Hero Other

Author MD Mostafa Niloy

Tailwind v3.4 759 3

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Free SEO Analyzer Tool | Visernic</title>
    
    <meta name="description" content="Analyze your website's SEO with Visernic's free auditing tool. Check 50+ ranking factors including on-page SEO, performance, and security.">
    <meta name="author" content="Visernic Limited">
    <meta property="og:image" content="https://i.postimg.cc/bwR0cd3C/547687027.png">
    <link rel="icon" type="image/png" href="https://i.postimg.cc/26RKc169/icon-1.png">
    <link rel="apple-touch-icon" href="https://i.postimg.cc/26RKc169/icon-1.png">

/* --- HEADER --- */
        .header { background: #fff; padding: 18px 0; border-bottom: 1px solid var(--rm-border); position: sticky; top: 0; z-index: 100; }
        .nav { display: flex; justify-content: space-between; align-items: center; }
        .logo { font-size: 1.4rem; font-weight: 700; color: var(--rm-dark); display: flex; align-items: center; gap: 10px; }
        .logo img { height: 32px; width: auto; }
        .nav-btn { background: var(--rm-blue); color: #fff; padding: 10px 25px; border-radius: 6px; font-weight: 600; font-size: 0.95rem; transition: 0.2s; }
        .nav-btn:hover { background: #0582b6; transform: translateY(-2px); box-shadow: 0 5px 15px -5px rgba(6, 158, 222, 0.4); }

/* --- HERO & SEARCH --- */
        .hero { text-align: center; padding: 80px 20px 100px; background: #fff; border-bottom: 1px solid var(--rm-border); }
        .hero h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); margin-bottom: 20px; color: var(--rm-dark); letter-spacing: -1px; }
        .hero p { font-size: 1.2rem; max-width: 650px; margin: 0 auto 40px; }

.search-box { max-width: 750px; margin: 0 auto; position: relative; z-index: 10; box-shadow: 0 20px 40px rgba(82,63,105,0.1); }
        .input-group {
            display: flex; background: #fff; padding: 8px; border-radius: 10px;
            border: 1px solid var(--rm-border); transition: 0.3s;
        }
        .input-group:focus-within { border-color: var(--rm-blue); box-shadow: 0 0 0 4px rgba(6, 158, 222, 0.1); }
        .rm-input {
            flex: 1; padding: 15px 25px; font-size: 1.1rem; border: none;
            outline: none; color: var(--rm-dark); width: 100%;
        }
        .search-btn-main {
            background: var(--rm-blue); color: #fff; border: none; padding: 0 40px;
            font-size: 1.1rem; font-weight: 700; border-radius: 8px; cursor: pointer;
            transition: 0.2s;
        }
        .search-btn-main:hover { background: #0582b6; }

/* --- LANDING SECTIONS --- */
        .section { padding: 80px 0; }
        .sec-title { text-align: center; margin-bottom: 50px; font-size: 2.2rem; color: var(--rm-dark); }
        .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
        .feature-card {
            background: #fff; padding: 40px 30px; border-radius: 16px;
            box-shadow: 0 2px 6px rgba(82,63,105,.04); border: 1px solid var(--rm-border);
            transition: 0.3s;
        }
        .feature-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(82,63,105,0.1); }
        .f-icon { font-size: 2.5rem; color: var(--rm-blue); margin-bottom: 25px; }
        .feature-card h3 { margin-bottom: 15px; font-size: 1.4rem; }

.faq-grid { display: grid; gap: 20px; max-width: 850px; margin: 0 auto; }
        .faq-item { background: #fff; padding: 30px; border-radius: 14px; border: 1px solid var(--rm-border); }
        .faq-item h4 { color: var(--rm-blue); margin-bottom: 12px; font-size: 1.2rem; display: flex; align-items: center; gap: 10px; }

/* --- DASHBOARD --- */
        #dashboard { display: none; padding: 50px 0 100px; }
        
        /* Scorecard (Perfect Mobile Stack) */
        .score-overview {
            background: #fff; border-radius: 16px; padding: 40px;
            box-shadow: 0 2px 6px rgba(82,63,105,.04); margin-bottom: 40px;
            display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px;
        }
        .score-left { display: flex; align-items: center; gap: 40px; flex: 2; min-width: 300px; }
        .rm-gauge { width: 160px; height: 160px; position: relative; flex-shrink: 0; }
        .rm-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
        .rm-gauge circle { fill: none; stroke-width: 10; }
        .gauge-bg { stroke: var(--rm-border); }
        .gauge-val {
            stroke: var(--danger); stroke-linecap: round;
            stroke-dasharray: 440; stroke-dashoffset: 440; transition: 1.5s ease;
        }
        .score-text {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            text-align: center; line-height: 0.9;
        }
        .score-text h2 { font-size: 3.5rem; color: var(--rm-dark); margin: 0; }
        .score-text span { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; color: var(--rm-text); }

.url-badge {
            background: var(--rm-bg); padding: 6px 16px; border-radius: 50px; font-size: 0.9rem;
            display: inline-block; margin-bottom: 15px; max-width: 100%;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--rm-border);
        }

.score-stats { display: flex; gap: 40px; flex: 1; justify-content: flex-end; }
        .stat-val { font-size: 2.2rem; font-weight: 700; line-height: 1; margin-bottom: 8px; }
        .stat-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

/* Reports */
        .rm-section {
            background: #fff; border-radius: 16px; overflow: hidden;
            box-shadow: 0 2px 6px rgba(82,63,105,.04); margin-bottom: 35px; border: 1px solid var(--rm-border);
        }
        .rm-sec-header {
            padding: 25px 40px; border-bottom: 1px solid var(--rm-border); background: #fff;
            display: flex; align-items: center; gap: 15px; font-size: 1.3rem;
        }
        .rm-sec-icon { color: var(--rm-blue); }

.rm-audit {
            padding: 30px 40px; border-bottom: 1px solid var(--rm-border);
            display: flex; gap: 25px; align-items: flex-start;
        }
        .rm-audit:last-child { border-bottom: none; }
        .audit-status { font-size: 1.6rem; flex-shrink: 0; margin-top: 2px; }
        .audit-content { flex: 1; min-width: 0; }
        .audit-content h4 { font-size: 1.15rem; margin-bottom: 10px; color: var(--rm-dark); }
        .audit-desc { font-size: 1rem; margin-bottom: 12px; line-height: 1.6; }
        .audit-data {
            background: #f8f9fb; border: 1px dashed #d1d5db; padding: 8px 15px;
            border-radius: 8px; font-family: monospace; font-size: 0.9rem;
            display: inline-block; max-width: 100%; overflow-x: auto; color: var(--rm-heading);
        }

/* Search Preview */
        .preview-box {
            background: #fff; padding: 18px; border: 1px solid var(--rm-border); border-radius: 10px;
            font-family: arial, sans-serif; max-width: 600px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        .prev-title { color: #1a0dab; font-size: 20px; line-height: 1.3; margin-bottom: 4px; }
        .prev-url { color: #006621; font-size: 14px; margin-bottom: 4px; }
        .prev-desc { color: #545454; font-size: 14px; line-height: 1.4; }

/* UTILS */
        .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-danger { color: var(--danger); }
        #loader { display: none; padding: 100px 20px; text-align: center; }
        .rm-spinner {
            width: 60px; height: 60px; border: 5px solid var(--rm-border); border-top-color: var(--rm-blue);
            border-radius: 50%; animation: spin 1s infinite linear; margin: 0 auto 30px;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        #error { display: none; padding: 20px; background: #fee2e2; color: #c53030; border-radius: 12px; text-align: center; margin: 30px auto; max-width: 700px; font-weight: 600; }

/* --- MOBILE RESPONSIVE FIXES --- */
        @media (max-width: 992px) {
            .score-overview { flex-direction: column; text-align: center; padding: 30px 20px; }
            .score-left { flex-direction: column; width: 100%; gap: 25px; }
            .score-stats { justify-content: center; width: 100%; gap: 30px; }
            .rm-audit { flex-direction: column; gap: 15px; padding: 25px 20px; }
            .rm-sec-header { padding: 20px; }
            .hero h1 { font-size: 2.5rem; }
            .input-group { flex-direction: column; padding: 8px; }
            .rm-input { text-align: center; margin-bottom: 10px; border-bottom: 1px solid var(--rm-border); }
            .search-btn-main { width: 100%; padding: 15px 0; }
        }
    </style>
</head>
<body>

<header class="header">
        <div class="container nav">
            <div class="logo">
                <img src="https://i.postimg.cc/26RKc169/icon-1.png" alt="Visernic Logo">
                Visernic SEO
            </div>
            <a href="#analyze" class="nav-btn">Analyze Now</a>
        </div>
    </header>

<div class="hero" id="analyze">
        <div class="container">
            <h1>Free SEO Audit & Analysis Tool</h1>
            <p>Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.</p>
            <div class="search-box">
                <form id="sForm" class="input-group">
                    <input type="url" id="urlIn" class="rm-input" placeholder="Enter your website URL..." required autocomplete="off">
                    <button type="submit" class="search-btn-main">START AUDIT</button>
                </form>
            </div>
        </div>
    </div>

<div class="container">
        <div id="error"></div>
        <div id="loader">
            <div class="rm-spinner"></div>
            <h2 style="color: var(--rm-heading); margin-bottom: 10px;">Scanning Website...</h2>
            <p>Our bots are crawling your pages and checking ranking signals.</p>
        </div>
    </div>

<div id="landing">
        <section class="section">
            <div class="container">
                <h2 class="sec-title">Why Use Our SEO Tool?</h2>
                <div class="grid-3">
                    <div class="feature-card">
                        <i class="fas fa-bolt f-icon"></i>
                        <h3>Lightning Fast</h3>
                        <p>Get a complete technical SEO report in under 60 seconds. Our triple-core engine crawls faster than ever.</p>
                    </div>
                    <div class="feature-card">
                        <i class="fas fa-list-check f-icon"></i>
                        <h3>50+ Checks</h3>
                        <p>We analyze everything from meta tags and headings to advanced Schema markup and security headers.</p>
                    </div>
                    <div class="feature-card">
                        <i class="fas fa-mobile-screen-button f-icon"></i>
                        <h3>Mobile Ready</h3>
                        <p>Ensure your site meets Google's mobile-first indexing standards with our viewport and responsiveness checks.</p>
                    </div>
                </div>
            </div>
        </section>

<section class="section" style="background: #fff; border-top: 1px solid var(--rm-border);">
            <div class="container">
                <h2 class="sec-title">Frequently Asked Questions</h2>
                <div class="faq-grid">
                    <div class="faq-item">
                        <h4><i class="fas fa-circle-question"></i> Is this tool 100% free?</h4>
                        <p>Yes, you can run unlimited SEO audits for free. There are no hidden costs or limits.</p>
                    </div>
                    <div class="faq-item">
                        <h4><i class="fas fa-robot"></i> How does it work?</h4>
                        <p>Our bot crawls your provided URL just like Google, analyzing the HTML structure and technical assets.</p>
                    </div>
                    <div class="faq-item">
                        <h4><i class="fas fa-chart-line"></i> How do I fix the errors?</h4>
                        <p>Each failed test comes with a "How to fix" guide. Follow the recommendations to improve your score.</p>
                    </div>
                    <div class="faq-item">
                        <h4><i class="fas fa-shield-halved"></i> Is my data secure?</h4>
                        <p>We do not store any analyzed data. Your reports are generated in real-time and are private to you.</p>
                    </div>
                </div>
            </div>
        </section>
    </div>

<main id="dashboard">
        <div class="container">
            <div class="score-overview">
                <div class="score-left">
                    <div class="rm-gauge">
                        <svg viewBox="0 0 100 100"><circle class="gauge-bg" cx="50" cy="50" r="45"></circle><circle id="scoreCircle" class="gauge-val" cx="50" cy="50" r="45"></circle></svg>
                        <div class="score-text"><h2 id="finalScore">0</h2><span>/100</span></div>
                    </div>
                    <div>
                        <div class="url-badge" id="analyzedUrl">https://visernic.com</div>
                        <h3 id="verdict" style="font-size: 1.8rem; margin-bottom: 10px;">Analyzing...</h3>
                        <p>SEO Analysis & Overview Report</p>
                    </div>
                </div>
                <div class="score-stats">
                    <div><div class="stat-val text-success" id="pass">0</div><div class="stat-label">Passed</div></div>
                    <div><div class="stat-val text-warning" id="warn">0</div><div class="stat-label">Warnings</div></div>
                    <div><div class="stat-val text-danger" id="fail">0</div><div class="stat-label">Failed</div></div>
                </div>
            </div>

<div class="rm-section">
                <div class="rm-sec-header"><i class="fas fa-search rm-sec-icon"></i><h2>Basic SEO</h2></div>
                <div id="basic-audits"></div>
            </div>
            <div class="rm-section">
                <div class="rm-sec-header"><i class="fas fa-sliders-h rm-sec-icon"></i><h2>Advanced SEO</h2></div>
                <div id="adv-audits"></div>
            </div>
             <div class="rm-section">
                <div class="rm-sec-header"><i class="fas fa-tachometer-alt rm-sec-icon"></i><h2>Performance</h2></div>
                <div id="perf-audits"></div>
            </div>
             <div class="rm-section">
                <div class="rm-sec-header"><i class="fas fa-lock rm-sec-icon"></i><h2>Security</h2></div>
                <div id="sec-audits"></div>
            </div>
             <div class="rm-section">
                <div class="rm-sec-header"><i class="fas fa-share-nodes rm-sec-icon"></i><h2>Social</h2></div>
                <div id="soc-audits"></div>
            </div>

</div>
    </main>

<footer style="text-align: center; padding: 50px 0; border-top: 1px solid var(--rm-border); margin-top: 60px; background: #fff;">
        <div class="container">
            <img src="https://i.postimg.cc/26RKc169/icon-1.png" alt="Visernic" style="height: 40px; margin-bottom: 20px; opacity: 0.8;">
            <p>© 2025 Visernic SEO Tool. Development by <a href="https://visernic.com" target="_blank" style="color: var(--rm-blue); font-weight: 700;">Visernic Limited</a>.</p>
        </div>
    </footer>

UI.form.onsubmit = (e) => { e.preventDefault(); run(); };

async function run() {
            let url = UI.in.value.trim();
            if(!url) return alert("Please enter a URL");
            if(!/^https?:\/\//i.test(url)) url = 'https://' + url;
            reset(); UI.load.style.display='block'; UI.url.innerText = url;

try {
                let html = await fetchTry(url);
                if(!html) throw new Error("Failed to crawl website. Firewalls might be active.");
                let root = new URL(url).origin;
                let [rob, map] = await Promise.all([fetchTry(root+'/robots.txt').catch(()=>null), fetchTry(root+'/sitemap.xml').catch(()=>null)]);
                audits(new DOMParser().parseFromString(html,'text/html'), html, url, rob, map);
                render();
            } catch(e) {
                UI.err.innerText = e.message; UI.err.style.display='block'; UI.load.style.display='none';
            }
        }

async function fetchTry(url) {
            for(let p of PROXIES) { try { let r = await fetch(p+encodeURIComponent(url)); if(r.ok) return await r.text(); } catch(e) {} }
            return null;
        }

// ADVANCED
            add('adv-audits', 'Canonical Tag', doc.querySelector('link[rel="canonical"]'), 'Canonical present.', 'Missing canonical tag.');
            add('adv-audits', 'Robots.txt', rob&&rob.length>0, 'Robots.txt found.', 'Missing robots.txt.');
            add('adv-audits', 'XML Sitemap', map&&(map.includes('<?xml')||map.includes('<urlset')), 'Sitemap found.', 'Sitemap missing/invalid.');
            add('adv-audits', 'Schema Markup', doc.querySelector('script[type="application/ld+json"]'), 'Schema detected.', 'No Schema found.');

// PERFORMANCE
            let size = (html.length/1024).toFixed(1);
            add('perf-audits', 'Page Size', size<50, `Good size (${size}KB).`, `Large size (${size}KB).`);
            add('perf-audits', 'Mobile Viewport', doc.querySelector('meta[name="viewport"]'), 'Viewport present.', 'Missing viewport (Critical).', null, true);
            add('perf-audits', 'Minified HTML', !html.includes('\n    '), 'HTML appears minified.', 'HTML is not minified.');

// SECURITY
            add('sec-audits', 'SSL Secure', url.startsWith('https'), 'Using HTTPS.', 'Not using HTTPS (Critical).', null, true);
            add('sec-audits', 'Safe Links', doc.querySelectorAll('a[target="_blank"]:not([rel*="noopener"])').length===0, 'External links safe.', 'Unsafe external links detected.');
            add('sec-audits', 'Email Privacy', !doc.body.innerHTML.match(/[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+/), 'Emails hidden.', 'Plaintext emails found.');

// SOCIAL
            add('soc-audits', 'Open Graph', doc.querySelector('meta[property="og:title"]'), 'OG tags present.', 'Missing OG tags.');
            add('soc-audits', 'Twitter Card', doc.querySelector('meta[name="twitter:card"]'), 'Twitter tags present.', 'Missing Twitter tags.');
        }

function render() {
            UI.load.style.display='none'; UI.land.style.display='none'; UI.dash.style.display='block';
            let f = Math.max(0, Math.round(st.s));
            UI.arc.style.strokeDashoffset = 440 - (440 * f) / 100;
            let col = f>80?'var(--success)':(f>50?'var(--warning)':'var(--danger)');
            UI.arc.style.stroke = col;
            UI.verd.innerText = f>80?'Awesome!':(f>50?'Needs Work':'Critical Issues');
            UI.verd.style.color = col;
            let c=0, t=setInterval(()=>{if(c>=f)clearInterval(t);else c+=2;UI.val.innerText=Math.min(c,f);},20);
            UI.p.innerText=st.p; UI.w.innerText=st.w; UI.f.innerText=st.f;
        }

function reset() {
            st={s:100,p:0,w:0,f:0}; UI.dash.style.display='none'; UI.err.style.display='none';
            ['basic','adv','perf','sec','soc'].forEach(id=>document.getElementById(id+'-audits').innerHTML='');
            UI.arc.style.strokeDashoffset = 440;
        }
    </script>
</body>
</html>

Related Examples

cards
cards with background animation

Anonymous

3 years ago

11.9k
cards
cards with background animation

Anonymous

3 years ago

12.6k
Background image section

Marc

2 years ago

7.3k
cards
cards with background animation

Anonymous

2 years ago

3.8k
Invoice
Invoice

Ameth Galarcio

2 years ago

3.4k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Ameth Galarcio

2 years ago

4.1k
Payment Cards

Shammi Nethupul

2 years ago

3k
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Coastal UI

1 year ago

2.8k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Abhiraj

1 year ago

1.9k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Ayyamperumal S

1 year ago

3.2k
Simple Hero Section
Hero Section using Tailwind

Ahita Bisma Adlula

1 year ago

1.8k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Ayyamperumal S

1 year ago

2.6k