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

<div class="absolute inset-0 border-[6px] border-blue-600 rounded-xl pointer-events-none"></div>

<div class="mb-8">
      <h1 class="text-5xl font-extrabold text-gray-800 tracking-wide">Certificate of Completion</h1>
      <p class="text-gray-500 mt-3 text-lg">This certifies that</p>
    </div>

<h2 class="text-4xl font-serif font-bold text-blue-700 mt-2 underline decoration-2 decoration-blue-500">Amarkesh Maurya</h2>

<div class="mt-8 text-gray-700 text-lg leading-relaxed max-w-2xl mx-auto">
      <p>has successfully completed the professional course</p>
      <p class="text-2xl font-semibold text-gray-900 mt-2">“Digital Marketing Mastery Program”</p>
      <p class="mt-6 italic text-gray-600">in recognition of outstanding performance, creativity, and dedication.</p>
    </div>

<div class="my-10 flex justify-center">
      <div class="h-[2px] w-32 bg-gradient-to-r from-blue-500 to-blue-700 rounded-full"></div>
    </div>

<div class="flex justify-between items-center px-4 mt-10">
      
      <div class="text-left">
        <p class="font-semibold text-gray-800 text-lg">Sachin Chaudhary</p>
        <p class="text-gray-500 text-sm">Course Instructor</p>
      </div>

<div class="flex flex-col items-center">
        <div class="w-20 h-20 border-4 border-blue-600 rounded-full flex items-center justify-center text-blue-600 font-bold text-xl uppercase tracking-widest">
          MM
        </div>
        <p class="text-gray-500 text-xs mt-2">Official Seal</p>
      </div>

<div class="text-right">
        <p class="font-semibold text-gray-800 text-lg">Lumbini Buddhist University</p>
        <p class="text-gray-500 text-sm">October 2025</p>
      </div>
    </div>

<div class="mt-10 text-gray-400 text-sm">
      <p>Powered by <span class="text-blue-600 font-semibold">Mews Media Pvt. Ltd.</span></p>
    </div>
  </div>
</div>

Related Examples