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

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

BONIMATOR Responsive Tailwind Starter Template
Responsive Tailwind Starter Template

Author:
Bonimater

3 months ago

591
Full Page loading overlay

Author:
Bunny

2 years ago

12.1k
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

5 months ago

399
about video
about kelaplus video

Author:
Omer fils ELENGA

3 months ago

330
Team Members

Author:
Abdul Baset Bappy

3 months ago

496
Todo List with Dark theme
Todo List with Dark theme

Author:
Muzammil Riaz

4 months ago

460
Full HTML Version
What's Included: Title*: Required input Description: Optional textarea Fully responsive and dark mode ready Simple validation (required on title)

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

379
Privacy Policy
Privacy Policy

Author:
Tanvir Hasan Bappy (Tanvir)

10 months ago

1.1k
Help and support center ticketing system
Help and support center ticketing system

Author:
Rushikesh Latpate

7 months ago

1.1k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

9 months ago

820
Icon group

Author:
Conan Hilton

2 years ago

9.8k
free tailwind resume template
free tailwind resume template

Author:
Geoffrey Callaghan

1 year ago

3.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components