diff --git a/src/App.js b/src/App.js
index f66a86d..6c39272 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,6 +5,7 @@ import Modal from './components/Modal'
 import Tooltip from './components/Tooltip'
 import Drawer from './components/Drawer'
 import Collapse from './components/Collapse'
+import Badge from './components/Badge'
 
 function App() {
   const [modelOpen, setModelOpen] = useState(false)
@@ -126,6 +127,8 @@ function App() {
       <Collapse isOpen={collapse}>
         <div className="bg-red-600 p-10 text-white">This is collapse content</div>
       </Collapse>
+
+      <Badge theme="info" text="Profile"/>
     </div>
   )
 }
diff --git a/src/components/Badge.js b/src/components/Badge.js
new file mode 100644
index 0000000..0efc263
--- /dev/null
+++ b/src/components/Badge.js
@@ -0,0 +1,43 @@
+import React, { useState } from 'react'
+
+// **********************
+//  Parameters
+
+// 1. optional
+//   a. classes(all TailwindCSS classes)
+
+// 2. required
+//   a. text (String 64)
+//   b. theme(danger,warning,info,primary,light,secondary,success)
+// **********************
+
+const Badge = ({ text, theme, classes }) => {
+
+  const themeBg = {
+    danger: ' bg-red-600 text-white',
+    warning: ' bg-yellow-500 text-white',
+    info: ' bg-blue-400 text-white',
+    success: ' bg-green-600 text-white',
+    secondary: ' bg-gray-600 text-white',
+    light: ' bg-white',
+    primary: ' bg-indigo-600 text-white',
+  }
+  //   badge classes
+  let defaultClasses = 'absolute'
+  let badgeClasses =
+    classes !== undefined
+      ? `${defaultClasses} ${classes}`
+      : 'absolute mt-25 px-3 py-1 rounded w-30 text-center'
+  badgeClasses += themeBg[theme]
+  // end badges classes
+console.log(badgeClasses)
+  return (
+    <div>
+      <div  className={badgeClasses}>
+      <div>{text}</div>
+    </div>
+    </div>
+  )
+}
+
+export default Badge