diff --git a/src/components/TextInput.tsx b/src/components/TextInput.tsx
new file mode 100644
index 0000000..45dbe29
--- /dev/null
+++ b/src/components/TextInput.tsx
@@ -0,0 +1,56 @@
+import classNames from "classnames";
+import { initial, isEmpty, omit } from "lodash";
+import React from "react";
+import "../index.css";
+
+type Props = {
+    inGroup?: boolean,
+    placeholder?: string | undefined;
+    className?: string | undefined;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "">;
+
+const inputNotInGroup = [
+    `border
+    border-2
+    border-solid
+    border-gray-200
+    hover:border-gray-500
+    active:border-gray-500
+    focus:border-gray-500`
+]
+
+const inputInGroup = [
+    `border-none
+    hover:none
+    active:none
+    focus:none
+    `
+]
+
+export const TextInput = ({
+    inGroup = false, // We should use this flag to choose how we will style our text input component
+    placeholder,
+    className,
+    ...props
+}: Props) => {
+
+  return (
+    <input
+      type="text"
+      placeholder={placeholder}
+      className={classNames([
+        "w-full",
+        "text-gray-900",
+        "rounded",
+        "outline-none",
+        "placeholder-text-500",
+        {   
+            //it this part we define how we style 
+            [`${inputNotInGroup}`] : !inGroup,
+            [`${inputInGroup}`] : inGroup,
+        },
+        className,        
+      ])}
+    />
+  );
+};
diff --git a/src/stories/TextInput.stories.tsx b/src/stories/TextInput.stories.tsx
new file mode 100644
index 0000000..177c8b2
--- /dev/null
+++ b/src/stories/TextInput.stories.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import {TextInput} from "../components/TextInput";
+
+export default {
+    title: 'Text Input',
+    component: TextInput,
+} as ComponentMeta<typeof TextInput>;
+
+const Template: ComponentStory<typeof TextInput> = (args) => <TextInput {...args} />
+
+export const TextInputStory = Template.bind({});
+
+TextInputStory.args ={
+    inGroup: true,
+    placeholder: "Search",
+    className: ["px-4", "py-2.5"]
+};