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

OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Abhiraj

9 months ago

1.7k
Floating "Go to Top" Button with Tailwind CSS
🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling. ✔️ Smooth scroll to top ✔️ Clean and modern design ✔️ Responsive and animated effects Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

Author:
Abdul Baset Bappy

7 months ago

641
TASK FAILED SUCCESSFULLY
TradingGoose Ep2 MockUp

Author:
Bruz

1 month ago

210
Rwanda-Canada Transport Services | Safe & Reliable Shipping
Attractive color scheme inspired by Rwanda's landscapes

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

368
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Author:
Ranit Saha

9 months ago

1.6k
Gradient Flip-Text Button with Hover Animation
This stylish button features a dynamic gradient background that shifts from a calm green gradient by default to a vibrant purple-pink-red gradient on hover. The button also includes an interactive text flip effect, where the text seamlessly transitions on hover, creating a visually appealing and modern UI element. Perfect for adding flair to your websites or applications while maintaining functionality and responsiveness.

Author:
SHARIFUL ISLAM

8 months ago

1k
Subscription Plans
Subscription Plans

Author:
Tanvir Hasan Bappy (Tanvir)

5 months ago

662
Table
Table with image and status with pagination buttons

Author:
Abhiraj

9 months ago

2.1k
profile
user profile

Author:
gidy

5 months ago

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

Author:
KULDEEP

4 months ago

264
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

4 months ago

998
Simple dialpad

Author:
Brandon D

2 years ago

11.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components