input

src/components/Input/Input.scss

+
+.form-control {
+  display: block;
+  width: 15%;
+  height: calc(1.5em + 1.25rem + 2px);
+  padding: 0.625rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #8898aa;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
+  box-shadow: 0 3px 2px ;
+  transition: all 0.15s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+.form-control {
+  font-size: .875rem;
+  height: calc(1.5em + 1.25rem + 5px);
+  transition: all .15s ease-in-out;
+}
+.form-control:focus {
+  color: #8898aa;
+  border-color: #5e72e4;
+  outline: 0;
+  background-color: #fff;
+  box-shadow: 0 3px 9px ;
+
+}
\ No newline at end of file

src/components/Input/index.jsx

+import { type } from '@testing-library/user-event/dist/type';
+import React from 'react'
+import PropTypes from "prop-types";
+import "./Input.scss";
+
+
+function Input(props) {
+  const{customClass}=props;
+
+    return (
+      <div>
+    <input className={`${customClass}`}/>
+    </div>
+    )
+    }
+
+
+
+
+
+
+export default Input