Converted all the css into Tailwind css of Drawer component

components/Drawer/Drawer.js

@@ -1,6 +1,5 @@
 import { node, string, bool } from 'prop-types';
 import classNames from 'classnames';
-import styles from './Drawer.module.css';
 
 Drawer.propTypes = {
  children: node.isRequired,
@@ -16,12 +15,16 @@ Drawer.defaultProps = {
 function Drawer({ children, className, isVisible }) {
  return (
  <div
- className={classNames(className, {
- [styles.visible]: isVisible,
- [styles.hidden]: !isVisible,
- })}
+ className={classNames(
+ className,
+ 'hidden lg:block transition-all ease-in-out duration-1000 fixed top-0 bottom-0 overflow-hidden width-full z-[2]',
+ {
+ '-left-0': isVisible,
+ '-left-[100%]': !isVisible,
+ },
+ )}
  >
- <div className={styles.content}>{children}</div>
+ <div className="h-full w-full">{children}</div>
  </div>
  );
 }

components/Drawer/__tests__/__snapshots__/Drawer.test.js.snap

@@ -2,10 +2,10 @@
 
 exports[`Drawer should render with many props assigned 1`] = `
 <div
- className="test-class visible"
+ className="test-class hidden lg:block transition-all ease-in-out duration-1000 fixed top-0 bottom-0 overflow-hidden width-full z-[2] -left-0"
 >
  <div
- className="content"
+ className="h-full w-full"
  >
  Test
  </div>
@@ -14,10 +14,10 @@ exports[`Drawer should render with many props assigned 1`] = `
 
 exports[`Drawer should render with required props 1`] = `
 <div
- className="hidden"
+ className="hidden lg:block transition-all ease-in-out duration-1000 fixed top-0 bottom-0 overflow-hidden width-full z-[2] -left-[100%]"
 >
  <div
- className="content"
+ className="h-full w-full"
  >
  Test
  </div>