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

385

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

Interactive Game Flip Card – Pure HTML & CSS Component
An elegant and interactive game info flip card built purely with HTML and CSS. This component flips smoothly on hover to reveal detailed game information on the back, providing a modern and engaging way to showcase your games without using JavaScript. Perfect for gaming websites wanting sleek animations and clean design.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

1.2k
Updated customer details page
Customer details page

Author:
Olivia Smith

1 year ago

3.8k
Clean AI Workspace Dashboard
A pristine, light-mode SaaS interface designed for AI chat applications. It features a structured three-column layout: a navigation sidebar with a theme toggle, a central workspace showcasing a "Welcome" state with colorful quick-action entry cards and a floating input bar, and a right-hand sidebar for project context. The design relies on soft grays, subtle borders (border-gray-200), and ample whitespace to create a focused, professional productivity environment.

Author:
Hamza Atig

2 months ago

178
Profile Card with Transparent
Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

Author:
KULDEEP

8 months ago

1k
Tailwind invoice example

Author:
Elijah Davis

3 years ago

19.2k
hello world
by salvator

Author:
Anonymous

9 months ago

572
google clone page
This HTML page includes: The Google logo with the correct colors A search input field with microphone and camera icons "Google Search" and "Win Freeing Lucky" buttons The text "With new The ZGS Breakthrough Plus cabinets today's where business ?" Footer with all the links shown in the image: Advertising, Business, New Search works, Privacy, Terms, Settings The climate action text in the footer The layout is responsive and uses Tailwind CSS for styling. The colors match Google's brand colors, and the overall structure matches what's shown in the image.

Author:
Bishnu Thapa

10 months ago

990
admindashboard
creates a responsive, interactive admin dashboard using Tailwind CSS, Font Awesome, Chart.js, and custom JavaScript animations. It's called "Materially Dashboard" and is designed for presenting key statistics and analytics data in a visually appealing manner.

Author:
ishimwe shadad

9 months ago

799
blockquote

Author:
Freja Jensen

3 years ago

10.2k
Coffee & Tea
Coffee: A brewed drink prepared from roasted seeds, called coffee beans, of the coffee plant. Tea: An agricultural product of the leaves, leaf buds, and internodes of various cultivars and sub-varieties of the Camellia sinensis plant, processed and cured using various methods.

Author:
Augustin

9 months ago

999
Chatbox template

Author:
Lucas Martinez

2 years ago

12.6k
3d element

Author:
Omer fils ELENGA

3 months ago

194

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components