Let's Design a Laurel Wreath With TailwindCSS.

#laurel #wreath #web #design

Need a laurel wreath on your website?

Forget spending time in Illustrator or fiddling with SVG editors. With a simple image and a dash of TailwindCSS spices, you can create a clean, stylish badge in no time — no design software required.

The Code On codepen

If You Want a React Code :

import { BsStarFill } from 'react-icons/bs';

export default function AwardBadge() {
   return (
    <div className="relative w-40 h-40 flex items-center justify-center text-gray-500">
      <img src="https://res.cloudinary.com/dzgjkx0pm/image/upload/v1748274197/award_ox3egn.png" alt="Award" className="w-full scale-130 h-full" />

      <div className="absolute top-1 flex items-end space-x-2 text-amber-400">
        <BsStarFill size={20} />
        <BsStarFill size={40} />
        <BsStarFill size={20} />
      </div>

      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center flex flex-col items-center justify-center">
          <span className="text-sm font-bold uppercase leading-tight text-slate-600">
            MOBILE MASTERY AWARD
          </span>
      </div>

      <span className="absolute text-slate-600 bottom-4 text-sm font-semibold">2025</span>
    </div>
  );
}