home page responsive

Rakibhasaniu · Oct 12, 2022 · 039aa36 · 039aa36
1 parent c337c3b
commit 039aa36
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/components/Display/Display.js b/src/components/Display/Display.js
@@ -7,12 +7,13 @@ const Display = ({quiz}) => {
     return (
         <div>
         <img
-          className='bg-slate-900	'
+          className=' bg-slate-500 object-cover w-full h-56 mb-6 rounded shadow-lg md:h-64 xl:h-80'
           src={logo}
           alt=''
         />
         <p className='mb-2 text-xl font-bold leading-none sm:text-2xl'>{name}</p>
-       <Link to={`/quiz/${id}`}><button 
+       <Link to={`/quiz/${id}`}><button
+        className='px-8 block w-full mt-4 py-3 font-semibold rounded-full bg-cyan-200 text-gray-800 hover:bg-cyan-400' 
         >
           Start Quiz
         </button></Link>

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
@@ -10,10 +10,12 @@ const Home = () => {
 
 
     return (
-        <div>
+        <div className='px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20'>
+            <div className='grid gap-8 row-gap-5 mb-8 lg:grid-cols-3 lg:row-gap-8'>
             {
                 dt.map(quiz => <Display key={quiz.id} quiz={quiz}></Display> )
             }
+            </div>
         </div>
     );
 };