Posted on May 26

Let's Design a Laurel Wreath With TailwindCSS.

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> ); }