finished first mobile page

src/components/Outstaffing/Outstaffing.module.css

@@ -49,7 +49,6 @@
   min-width: 260px;
   min-height: 120px;
   cursor: pointer;
-  /* border: 2px solid #cdeaba; */
   background-color: #f9f9f9;
   border-radius: 20px;
   position: relative;
@@ -102,6 +101,39 @@
   left: -9%;
 }
 
+@media (max-width: 575.98px) {
+  .mobile__none {
+    display: none;
+  }
+}
+
+.mobile__block {
+  display: block;
+  animation: fadeInFromNone 0.5s ease-out;
+}
+
+@media (max-width: 575.98px) {
+  @keyframes fadeInFromNone {
+    0% {
+      display: none;
+      opacity: 0;
+      transform: translateY(-100px);
+    }
+
+    10% {
+      display: block;
+      opacity: 0;
+      transform: translateY(-50px);
+    }
+
+    100% {
+      display: block;
+      opacity: 1;
+      transform: translateY(0px);
+    }
+  }
+}
+
 .outstaffing__box > div > ul {
   padding-left: 0;
 }

src/components/Outstaffing/OutstaffingBlock.js

@@ -3,14 +3,14 @@ import style from './Outstaffing.module.css';
 
 const OutstaffingBlock = ({ data = {}, onClick, onTabBarClick, selected }) => {
   const { img, text, tags, name, header } = data;
-  let clas;
+  let classes;
 
   if (name === 'Backend') {
-    clas = style.back;
+    classes = style.back;
   } else if (name === 'Design') {
-    clas = style.des;
+    classes = style.des;
   } else if (name === 'Frontend') {
-    clas = style.front;
+    classes = style.front;
   }
 
   return (
@@ -20,9 +20,9 @@ const OutstaffingBlock = ({ data = {}, onClick, onTabBarClick, selected }) => {
         onClick={() => onTabBarClick(name)}
       >
         <h3>{header}</h3>
-        <img className={clas} src={img} alt="img" />
+        <img className={classes} src={img} alt="img" />
       </div>
-      <div>
+      <div className={`${selected ? style.mobile__block : style.mobile__none}`}>
         <p>{text}</p>
         {tags && (
           <ul className={style.items}>