diff --git a/src/components/SaleOffBadge.tsx b/src/components/SaleOffBadge.tsx
new file mode 100644
index 0000000..6c086b6
--- /dev/null
+++ b/src/components/SaleOffBadge.tsx
@@ -0,0 +1,22 @@
+import React, { FC } from "react";
+
+export interface SaleOffBadgeProps {
+  className?: string;
+  desc?: string;
+}
+
+const SaleOffBadge: FC<SaleOffBadgeProps> = ({
+  className = "",
+  desc = "-10% today",
+}) => {
+  return (
+    <div
+      className={`nc-SaleOffBadge flex items-center justify-center text-xs py-0.5 px-3 bg-red-700 text-red-50 rounded-full ${className}`}
+      data-nc-id="SaleOffBadge"
+    >
+      {desc}
+    </div>
+  );
+};
+
+export default SaleOffBadge;