10 HTML Snippets You Can Test Right Now

The best way to learn what HTML can do is to see it in action. Below are 10 self-contained HTML snippets you can copy and paste directly into the HTML Previewer. Each one demonstrates a different technique — from basic layout to interactive elements — and each works without any external CSS frameworks or JavaScript libraries.

Copy any snippet, paste it into the previewer, and start tweaking. Change the colors, swap the text, add elements, break things and fix them. That's how you learn.

1. Responsive Navigation Bar

A horizontal nav bar that collapses cleanly on narrow screens. Uses flexbox with a wrap fallback.

<nav style="display:flex;flex-wrap:wrap;gap:8px;padding:12px 20px;background:#1a1a2e;border-radius:8px">
  <a href="#" style="color:#e0e0e0;text-decoration:none;padding:8px 16px;border-radius:6px;font-family:sans-serif;font-size:14px">Home</a>
  <a href="#" style="color:#e0e0e0;text-decoration:none;padding:8px 16px;border-radius:6px;font-family:sans-serif;font-size:14px">About</a>
  <a href="#" style="color:#e0e0e0;text-decoration:none;padding:8px 16px;border-radius:6px;font-family:sans-serif;font-size:14px">Services</a>
  <a href="#" style="color:#e0e0e0;text-decoration:none;padding:8px 16px;border-radius:6px;font-family:sans-serif;font-size:14px">Contact</a>
</nav>

Toggle to mobile width in the previewer — the links wrap to a second row instead of overflowing. Try changing the background color or adding more links.

2. Pricing Card

A standalone pricing card with a header, feature list, and call-to-action button. Common on SaaS landing pages.

<div style="max-width:320px;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;font-family:system-ui,sans-serif">
  <div style="background:#4f46e5;color:white;padding:24px;text-align:center">
    <div style="font-size:14px;text-transform:uppercase;letter-spacing:1px;opacity:0.8">Pro Plan</div>
    <div style="font-size:48px;font-weight:700;margin:8px 0">29</div>
    <div style="font-size:14px;opacity:0.8">per month</div>
  </div>
  <div style="padding:24px">
    <ul style="list-style:none;padding:0;margin:0 0 24px">
      <li style="padding:8px 0;border-bottom:1px solid #f1f5f9">Unlimited projects</li>
      <li style="padding:8px 0;border-bottom:1px solid #f1f5f9">Priority support</li>
      <li style="padding:8px 0;border-bottom:1px solid #f1f5f9">Custom domain</li>
      <li style="padding:8px 0">API access</li>
    </ul>
    <a href="#" style="display:block;text-align:center;background:#4f46e5;color:white;padding:12px;border-radius:8px;text-decoration:none;font-weight:600">Get Started</a>
  </div>
</div>

3. Alert / Notification Banners

Four colored alert styles — success, warning, error, and info. Useful in dashboards, admin panels, and status pages.

<div style="font-family:sans-serif;display:flex;flex-direction:column;gap:12px;max-width:500px">
  <div style="padding:12px 16px;border-radius:8px;background:#ecfdf5;border-left:4px solid #10b981;color:#065f46">Success — your changes have been saved.</div>
  <div style="padding:12px 16px;border-radius:8px;background:#fffbeb;border-left:4px solid #f59e0b;color:#92400e">Warning — your trial expires in 3 days.</div>
  <div style="padding:12px 16px;border-radius:8px;background:#fef2f2;border-left:4px solid #ef4444;color:#991b1b">Error — payment method declined.</div>
  <div style="padding:12px 16px;border-radius:8px;background:#eff6ff;border-left:4px solid #3b82f6;color:#1e40af">Info — maintenance scheduled for Sunday.</div>
</div>

4. Simple Data Table

A clean, striped table with a sticky header effect. Great for displaying any tabular data.

<table style="width:100%;border-collapse:collapse;font-family:sans-serif;font-size:14px">
  <thead>
    <tr style="background:#1e293b;color:white">
      <th style="padding:12px 16px;text-align:left">Name</th>
      <th style="padding:12px 16px;text-align:left">Role</th>
      <th style="padding:12px 16px;text-align:right">Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr style="background:#f8fafc">
      <td style="padding:10px 16px">Alice Chen</td>
      <td style="padding:10px 16px">Engineer</td>
      <td style="padding:10px 16px;text-align:right">125,000</td>
    </tr>
    <tr>
      <td style="padding:10px 16px">Bob Smith</td>
      <td style="padding:10px 16px">Designer</td>
      <td style="padding:10px 16px;text-align:right">110,000</td>
    </tr>
    <tr style="background:#f8fafc">
      <td style="padding:10px 16px">Carol Davis</td>
      <td style="padding:10px 16px">Product</td>
      <td style="padding:10px 16px;text-align:right">130,000</td>
    </tr>
  </tbody>
</table>

5. Hero Section with Gradient

A full-width hero banner with gradient background, heading, subtitle, and CTA button. The foundation of most landing pages.

<div style="background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:60px 40px;text-align:center;border-radius:12px;color:white;font-family:system-ui,sans-serif">
  <h1 style="margin:0 0 12px;font-size:36px;font-weight:800">Build Something Amazing</h1>
  <p style="margin:0 0 24px;font-size:18px;opacity:0.9;max-width:500px;margin-left:auto;margin-right:auto">The fastest way to turn your ideas into reality. No setup, no limits.</p>
  <a href="#" style="display:inline-block;background:white;color:#667eea;padding:14px 32px;border-radius:8px;text-decoration:none;font-weight:700;font-size:16px">Get Started Free</a>
</div>

6. Testimonial Card

A customer testimonial with quote, attribution, and avatar placeholder. Common in marketing pages.

<div style="max-width:480px;background:white;border:1px solid #e5e7eb;border-radius:12px;padding:24px;font-family:system-ui,sans-serif">
  <p style="font-size:16px;line-height:1.6;color:#374151;margin:0 0 16px;font-style:italic">"This tool saved us 10 hours a week. The team adopted it in a day and we haven't looked back."</p>
  <div style="display:flex;align-items:center;gap:12px">
    <div style="width:40px;height:40px;border-radius:50%;background:#818cf8;display:flex;align-items:center;justify-content:center;color:white;font-weight:700">JD</div>
    <div>
      <div style="font-weight:600;color:#111827">Jane Doe</div>
      <div style="font-size:13px;color:#6b7280">CTO at TechCorp</div>
    </div>
  </div>
</div>

7. Progress Bar

A visual progress indicator. Change the width percentage to update progress.

<div style="font-family:sans-serif;max-width:400px">
  <div style="display:flex;justify-content:space-between;margin-bottom:6px;font-size:14px">
    <span style="font-weight:600;color:#1f2937">Upload Progress</span>
    <span style="color:#6b7280">73%</span>
  </div>
  <div style="height:12px;background:#e5e7eb;border-radius:6px;overflow:hidden">
    <div style="width:73%;height:100%;background:linear-gradient(90deg,#3b82f6,#8b5cf6);border-radius:6px;transition:width 0.3s"></div>
  </div>
</div>

Try changing width:73% to any other value and watch the bar update in the preview.

8. Footer with Columns

A multi-column footer layout using inline-block for email compatibility. Works on desktop and wraps on mobile.

<footer style="background:#111827;color:#9ca3af;padding:40px 20px;font-family:sans-serif;font-size:14px">
  <div style="max-width:600px;margin:0 auto">
    <div style="display:inline-block;vertical-align:top;width:45%;min-width:200px;margin-bottom:20px">
      <div style="font-weight:700;color:white;margin-bottom:12px">Company</div>
      <div><a href="#" style="color:#9ca3af;text-decoration:none;display:block;padding:4px 0">About</a></div>
      <div><a href="#" style="color:#9ca3af;text-decoration:none;display:block;padding:4px 0">Careers</a></div>
      <div><a href="#" style="color:#9ca3af;text-decoration:none;display:block;padding:4px 0">Blog</a></div>
    </div>
    <div style="display:inline-block;vertical-align:top;width:45%;min-width:200px;margin-bottom:20px">
      <div style="font-weight:700;color:white;margin-bottom:12px">Support</div>
      <div><a href="#" style="color:#9ca3af;text-decoration:none;display:block;padding:4px 0">Help Center</a></div>
      <div><a href="#" style="color:#9ca3af;text-decoration:none;display:block;padding:4px 0">Contact</a></div>
      <div><a href="#" style="color:#9ca3af;text-decoration:none;display:block;padding:4px 0">Status</a></div>
    </div>
    <div style="border-top:1px solid #374151;margin-top:20px;padding-top:20px;text-align:center;font-size:13px">2026 Your Company. All rights reserved.</div>
  </div>
</footer>

9. Badge Collection

Colored status badges like you see in dashboards and project management tools.

<div style="display:flex;flex-wrap:wrap;gap:8px;font-family:sans-serif">
  <span style="padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;background:#dcfce7;color:#166534">Active</span>
  <span style="padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;background:#fef3c7;color:#92400e">Pending</span>
  <span style="padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;background:#fee2e2;color:#991b1b">Overdue</span>
  <span style="padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;background:#e0e7ff;color:#3730a3">In Review</span>
  <span style="padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;background:#f3f4f6;color:#374151">Draft</span>
</div>

10. Email-Safe Two-Column Layout

A table-based two-column layout that works in every email client, including Outlook. This is the building block of most email templates.

<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="margin:0 auto;font-family:Arial,sans-serif">
  <tr>
    <td width="280" valign="top" style="padding:20px;background:#f8fafc;border-radius:8px 0 0 8px">
      <h3 style="margin:0 0 8px;color:#1e293b">Left Column</h3>
      <p style="margin:0;color:#64748b;font-size:14px;line-height:1.5">This side could hold an image, icon, or introductory text. Fixed width keeps it predictable across email clients.</p>
    </td>
    <td width="20"></td>
    <td width="280" valign="top" style="padding:20px;background:#f8fafc;border-radius:0 8px 8px 0">
      <h3 style="margin:0 0 8px;color:#1e293b">Right Column</h3>
      <p style="margin:0;color:#64748b;font-size:14px;line-height:1.5">And this side holds the complementary content. The middle td is a 20px spacer — the email-safe way to add a gap.</p>
    </td>
  </tr>
</table>

Toggle to mobile (375px) in the previewer to see how this handles narrow widths. Spoiler: it overflows, because email tables don't have responsive breakpoints by default. That's why email developers add a media query that stacks the columns vertically — but only for clients that support media queries.

Start Experimenting

Every snippet above is a starting point. Paste it into the HTML Previewer, then start changing things: swap colors, adjust spacing, add new elements, combine snippets together. Hit Prettify when the code gets messy, Minify when you're ready to use it, and toggle responsive to check mobile. That's the whole workflow.