Home
Ramkesh Gupta
Certificate of Completion

Certificate of Completion

A clean and modern certificate template built with Tailwind CSS. Ideal for courses, training programs, and professional achievements.

This tailwind example is contributed by Ramkesh Gupta, on 13-Oct-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Ramkesh Gupta

593

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Professional Certificate Generator (A4 Portrait)</title>

<script src="https://cdn.tailwindcss.com"></script>
  
  <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>

@media print {
      body { background: #fff !important; }
      #controls { display: none !important; }
      #certificate {
        box-shadow: none !important;
        margin: 0 auto !important;
        /* If your printer forces margins, increase this inner padding in HTML: p-[25mm] */
      }
    }

/* Nice scrollbar for large A4 preview on small screens (dev only) */
    .nice-scroll::-webkit-scrollbar { height: 10px; width: 10px; }
    .nice-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
    .nice-scroll::-webkit-scrollbar-track { background: #f1f5f9; }
  </style>
</head>
<body class="min-h-screen bg-gray-100">
  <div class="mx-auto max-w-7xl p-6 space-y-6">
    <h1 class="text-2xl md:text-3xl font-bold">🎓 Professional Certificate Generator (A4)</h1>

<section id="controls" class="bg-white rounded-xl shadow p-5 space-y-4">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <label class="block">
          <span class="text-sm text-gray-600">Recipient Name</span>
          <input id="inp-name" class="mt-1 w-full rounded-lg border-gray-300 focus:ring-0 focus:border-blue-600" placeholder="Full name" />
        </label>

<label class="block">
          <span class="text-sm text-gray-600">Course Title</span>
          <input id="inp-course" class="mt-1 w-full rounded-lg border-gray-300 focus:ring-0 focus:border-blue-600" placeholder="e.g., Digital Marketing Mastery" />
        </label>

<label class="block">
          <span class="text-sm text-gray-600">Issue Date</span>
          <input id="inp-date" type="date" class="mt-1 w-full rounded-lg border-gray-300 focus:ring-0 focus:border-blue-600" />
        </label>

<label class="block">
          <span class="text-sm text-gray-600">Certificate ID</span>
          <input id="inp-id" class="mt-1 w-full rounded-lg border-gray-300 focus:ring-0 focus:border-blue-600" placeholder="Auto / custom" />
        </label>

<label class="block">
          <span class="text-sm text-gray-600">Instructor</span>
          <input id="inp-instructor" class="mt-1 w-full rounded-lg border-gray-300 focus:ring-0 focus:border-blue-600" placeholder="Instructor name" />
        </label>

<label class="block">
          <span class="text-sm text-gray-600">Organization</span>
          <input id="inp-org" class="mt-1 w-full rounded-lg border-gray-300 focus:ring-0 focus:border-blue-600" placeholder="Your academy / brand" />
        </label>

<label class="block">
          <span class="text-sm text-gray-600">Grade</span>
          <input id="inp-grade" class="mt-1 w-full rounded-lg border-gray-300 focus:ring-0 focus:border-blue-600" placeholder="A+" />
        </label>

<label class="block">
          <span class="text-sm text-gray-600">Hours</span>
          <input id="inp-hours" class="mt-1 w-full rounded-lg border-gray-300 focus:ring-0 focus:border-blue-600" placeholder="30" />
        </label>

<label class="block">
          <span class="text-sm text-gray-600">Location</span>
          <input id="inp-loc" class="mt-1 w-full rounded-lg border-gray-300 focus:ring-0 focus:border-blue-600" placeholder="Pokhara, Nepal" />
        </label>

<label class="block">
          <span class="text-sm text-gray-600">Signature (PNG)</span>
          <input id="inp-sign" type="file" accept="image/*" class="mt-1 block w-full text-sm" />
        </label>
      </div>

<div class="pt-2 flex flex-wrap gap-3">
        <button id="btn-reset" class="px-4 py-2 rounded-lg bg-gray-200 hover:bg-gray-300">Reset</button>
        <button id="btn-print" class="px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700">Print / Save PDF</button>
        <button id="btn-png" class="px-4 py-2 rounded-lg bg-emerald-600 text-white hover:bg-emerald-700">Download PNG</button>
      </div>

<p class="text-xs text-gray-500">
        Tip: Use “Print / Save as PDF” with **A4, 100% scale, Margins = None** for perfect output.
      </p>
    </section>

<div class="overflow-auto nice-scroll">
      <div
        id="certificate"
        class="relative bg-white w-[210mm] h-[297mm] mx-auto border-[12px] border-gray-200 shadow-2xl rounded-none p-[25mm]"
      >
        
        <div class="absolute inset-[12mm] border-[5px] border-blue-600 rounded-[6px] pointer-events-none"></div>

<div class="h-full flex flex-col">
          
          <header class="text-center">
            <p id="org" class="text-sm tracking-wide text-gray-500">Your Organization</p>
            <h2 class="text-4xl font-extrabold text-gray-800 tracking-wide">Certificate of Completion</h2>
            <p class="mt-2 text-gray-500">This certifies that</p>
          </header>

<div class="text-center mt-3">
            <h1 id="name" class="text-4xl font-serif font-bold text-blue-700 underline decoration-2 decoration-blue-500">
              Recipient Name
            </h1>
          </div>

<main class="mt-5 text-center">
            <p class="text-gray-700 text-lg">has successfully completed the professional course</p>
            <p id="course" class="text-2xl font-semibold text-gray-900 mt-2">“Course Title”</p>
            <p class="mt-6 italic text-gray-600 max-w-[140mm] mx-auto">
              in recognition of outstanding performance, creativity, and dedication throughout the training.
            </p>

<div class="mt-8 flex flex-wrap justify-center gap-x-8 gap-y-3 text-base text-gray-700">
              <span>Grade: <strong id="grade">A+</strong></span>
              <span>Hours: <strong id="hours">30</strong></span>
              <span>Location: <strong id="loc">Pokhara, Nepal</strong></span>
              <span>ID: <strong id="cid">MM-2025-0001</strong></span>
            </div>
          </main>

<div class="flex-1"></div>

<footer class="mt-8">
            <div class="flex items-end justify-between">
              
              <div class="w-[65mm]">
                <div class="h-12">
                  <img id="sign" alt="" class="max-h-12 object-contain opacity-90" />
                </div>
                <div class="border-t mt-2 pt-1 text-left">
                  <p id="instructor" class="font-semibold text-gray-800">Instructor Name</p>
                  <p class="text-gray-500 text-sm">Course Instructor</p>
                </div>
              </div>

<div class="w-28 h-28 border-4 border-blue-600 rounded-full flex items-center justify-center overflow-hidden shadow">
                <img id="logo" alt="" class="w-full h-full object-cover hidden" />
                <span id="seal-fallback" class="text-blue-600 font-bold text-xl">SEAL</span>
              </div>

<div class="w-[65mm] text-right">
                <div class="border-t mt-12 pt-1">
                  <p id="org2" class="font-semibold text-gray-800">Your Organization</p>
                  <p id="date" class="text-gray-500 text-sm">2025-10-13</p>
                </div>
              </div>
            </div>

<div class="text-center mt-6 text-gray-400 text-xs">
              Powered by <span class="text-blue-600 font-semibold">Mews Media Pvt. Ltd.</span>
            </div>
          </footer>
        </div>
      </div>
    </div>
  </div>

// Inputs
    const inpName = $('inp-name');
    const inpCourse = $('inp-course');
    const inpDate = $('inp-date');
    const inpID = $('inp-id');
    const inpInstructor = $('inp-instructor');
    const inpOrg = $('inp-org');
    const inpGrade = $('inp-grade');
    const inpHours = $('inp-hours');
    const inpLoc = $('inp-loc');
    const inpLogo = $('inp-logo');
    const inpSign = $('inp-sign');

// Outputs
    const outName = $('name');
    const outCourse = $('course');
    const outDate = $('date');
    const outCID = $('cid');
    const outInstructor = $('instructor');
    const outOrg = $('org');
    const outOrg2 = $('org2');
    const outGrade = $('grade');
    const outHours = $('hours');
    const outLoc = $('loc');
    const outLogo = $('logo');
    const sealFallback = $('seal-fallback');
    const outSign = $('sign');

// Defaults
    function initDefaults() {
      inpDate.value = todayISO();
      inpID.value = randID();
      inpOrg.value = 'Mews Media Academy';
      inpInstructor.value = 'Sachin Chaudhary';
      inpCourse.value = 'Digital Marketing Mastery';
      inpName.value = 'Amarkesh Maurya';
      inpGrade.value = 'A+';
      inpHours.value = '30';
      inpLoc.value = 'Pokhara, Nepal';
      applyToPreview();
    }

function applyToPreview() {
      outName.textContent      = inpName.value || 'Recipient Name';
      outCourse.textContent    = (inpCourse.value || 'Course Title').replace(/"([^"]*)"/g, '“$1”');
      outDate.textContent      = inpDate.value || todayISO();
      outCID.textContent       = inpID.value || randID();
      outInstructor.textContent= inpInstructor.value || 'Instructor Name';
      outOrg.textContent       = inpOrg.value || 'Your Organization';
      outOrg2.textContent      = inpOrg.value || 'Your Organization';
      outGrade.textContent     = inpGrade.value || 'A+';
      outHours.textContent     = inpHours.value || '30';
      outLoc.textContent       = inpLoc.value || 'City, Country';
    }

[inpName, inpCourse, inpDate, inpID, inpInstructor, inpOrg, inpGrade, inpHours, inpLoc]
      .forEach(el => el.addEventListener('input', applyToPreview));

// Logo upload
    inpLogo.addEventListener('change', (e) => {
      const f = e.target.files?.[0];
      if (!f) return;
      const url = URL.createObjectURL(f);
      outLogo.src = url;
      outLogo.classList.remove('hidden');
      sealFallback.classList.add('hidden');
    });

// Signature upload
    inpSign.addEventListener('change', (e) => {
      const f = e.target.files?.[0];
      if (!f) return;
      const url = URL.createObjectURL(f);
      outSign.src = url;
    });

// Actions
    $('btn-print').addEventListener('click', () => window.print());

$('btn-png').addEventListener('click', async () => {
      const node = document.getElementById('certificate');
      if (!window.html2canvas) {
        alert('PNG export helper not available. Use Print → Save as PDF or enable html2canvas CDN.');
        return;
      }
      const scale = 2; // sharper PNG
      const canvas = await html2canvas(node, { scale });
      const url = canvas.toDataURL('image/png');
      const a = document.createElement('a');
      a.href = url;
      a.download = (inpID.value || 'certificate') + '.png';
      a.click();
    });

$('btn-reset').addEventListener('click', () => {
      inpLogo.value = ''; inpSign.value = '';
      outLogo.src=''; outSign.src='';
      outLogo.classList.add('hidden'); sealFallback.classList.remove('hidden');
      initDefaults();
    });

// Boot
    initDefaults();
  </script>
</body>
</html>

Related Examples

Active Beauty Main Page

Author:
Maxim

11 months ago

1.3k
Sticky fullpage pages / slides

Author:
Hasan AlDoy (McDoy)

1 year ago

1.6k
Content Discovery Platform with Search & Filter
A modern, responsive web application built with Tailwind CSS that showcases content cards with search and filter functionality.

Author:
Sufyan jutt

4 months ago

330
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

11 months ago

1.5k
Innovative Developer & Digital Creator
Innovative Developer

Author:
gidy

9 months ago

1k
Engineering Project Dashboard
Track engineering assignments, project progress, technology stack, and delivery timelines in one simple dashboard.

Author:
Ayyamperumal S

1 week ago

85
card

Author:
Raul antonio de la cruz hernandez

2 months ago

222
Table
Table with image and status with pagination buttons

Author:
Abhiraj

1 year ago

2.6k
Calculator
A Basic Calculator

Author:
Debbie F

1 year ago

2.2k
Feeds
This is a responsive social media feed interface built with Tailwind CSS that features a clean, modern design with excellent color contrast and visual hierarchy. Here's a detailed breakdown of its components and layout:

Author:
ishimwe shadad

10 months ago

1k
Product Details Page
This section will show all the information about a selected product, including its title, description, price, images, and specifications.

Author:
mohit kulkarni

6 months ago

1.1k
Heading
Subtle Script Background - Large, very light script font in the background ("Amazing") Light-to-Dark Gradient Heading - Main heading fades from light gray to dark gray Layered Typography - Secondary heading in medium weight for contrast Elegant Divider - With centered italic text Minimalist Border Accents - Thin borders in corners for sophistication Responsive Design - Scales beautifully on all devices

Author:
KULDEEP

9 months ago

727

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components