Ribbon At Corner
In this craft, I share my learnings about creating a ribbon at corner of card.
Faisal Husain
Solar Plus
Complete home energy solution
Transform your home into a sustainable powerhouse with our comprehensive energy solution.
We will recreate this ribbon at corner of the card. If you want the code of the card above I am putting the code below
<div className="bg-white text-black h-[520px] w-[400px] rounded-xl shadow-xl px-6 flex flex-col relative">
<div className="absolute -right-2 -top-2 aspect-square w-36 overflow-hidden rounded-sm">
<div className="absolute left-0 top-0 h-2 w-2 bg-yellow-700 " />
<div className="absolute bottom-0 right-0 h-2 w-2 bg-yellow-700 " />
<div className="absolute bottom-0 right-0 w-56 origin-bottom-right rotate-45">
<div
className={`w-full py-1.5 text-center text-xs font-semibold uppercase tracking-wider shadow-sm bg-yellow-400`}
>
Most Popular
</div>
</div>
</div>
<div className="space-y-4">
<div className="space-">
<h3 className="font-bold text-2xl">Solar Plus</h3>
<p className="text-gray-600 text-sm">
Complete home energy solution
</p>
</div>
<div className="pt-4">
<span className="text-4xl font-bold">$299</span>
<span className="text-gray-600">/month</span>
</div>
<p className="text-sm text-gray-600 py-4">
Transform your home into a sustainable powerhouse with our
comprehensive energy solution.
</p>
<div className="space-y-3">
<div className="flex items-center gap-2">
<Check className="h-5 w-5 text-green-500" />
<span className="text-sm">Solar Panel Installation</span>
</div>
<div className="flex items-center gap-2">
<Check className="h-5 w-5 text-green-500" />
<span className="text-sm">Battery Storage System</span>
</div>
<div className="flex items-center gap-2">
<Check className="h-5 w-5 text-green-500" />
<span className="text-sm">24/7 Monitoring</span>
</div>
<div className="flex items-center gap-2">
<Check className="h-5 w-5 text-green-500" />
<span className="text-sm">Mobile App Access</span>
</div>
</div>
<button className="w-full bg-green-500 text-white py-3 rounded-lg mt-6 hover:bg-green-600 transition-colors">
Get Started
</button>
</div>
</div>In the above code the main ribbon code is this
<div className="absolute -right-2 -top-2 aspect-square w-36 overflow-hidden rounded-sm">
<div className="absolute left-0 top-0 h-2 w-2 bg-yellow-700 " />
<div className="absolute bottom-0 right-0 h-2 w-2 bg-yellow-700 " />
<div className="absolute bottom-0 right-0 w-56 origin-bottom-right rotate-45">
<div
className={`w-full py-1.5 text-center text-xs font-semibold uppercase tracking-wider shadow-sm bg-yellow-400`}
>
Most Popular
</div>
</div>
</div>You thinking what the big deal in this but this is a bit immersive
Solar Plus
Complete home energy solution
Transform your home into a sustainable powerhouse with our comprehensive energy solution.
Solar Plus
Complete home energy solution
Transform your home into a sustainable powerhouse with our comprehensive energy solution.
As you can see in above provided example how this is different from Basic ribbon.
Thank you . Keep building 👨💻