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

201

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

Contact Page

Author:
Sedat Kumcu

1 year ago

1.4k
Modern website that provides software services
The website is a platform that offers software services to users, including access to open-source code, downloadable projects, and relevant documentation. The main objective is to support students, developers, and the open-source community by sharing free tools and source code examples.

Author:
Rathanak Phan

6 months ago

451
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

3 months ago

719
Age verification 18+

Author:
Maxim

11 months ago

1k
pricing
pricing

Author:
Omer fils ELENGA

5 months ago

509
status indicatior
status indicator navigation dashbord

Author:
Rushikesh Latpate

11 months ago

976
cards
cards with background animation

Author:
Anonymous

2 years ago

11.3k
background animation
background animation

Author:
Anonymous

1 month ago

115
Solo leveling 2
Animation & movie field,videos,games.

Author:
ORGIN_DREAMS

7 months ago

707
Services

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

11 months ago

1.9k
5 Different Style of Button
Gradient Button outline button neon button Sliding Background pulsing Button

Author:
KULDEEP

5 months ago

365
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

8 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components