Fixed the tab component styles and also the 2 auth page templates hei…

…ghts
fwedwicc · Aug 6, 2024 · 21daaa4 · 21daaa4
1 parent 5179ed1
commit 21daaa4
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/src/components/Tab.jsx b/src/components/Tab.jsx
@@ -23,7 +23,7 @@ const Tab = ({ previewContent, codeSnippet, label }) => {
 
   return (
     <>
-      <div className='flex justify-between gap-2 items-end'>
+      <div className='flex md:flex-row flex-col md:justify-between md:items-end items-start justify-start gap-5'>
         <h2 className='md:text-[1.5rem] text-[1.2rem] leading-none font-medium'>{label}</h2>
         <div className='space-x-2 flex'>
           <div className='inline-flex p-1.5 border border-neutral-400/40 gap-2 rounded-[0.4rem]'>

diff --git a/src/components/application-ui/templates/auth-pages/AuthPage01.jsx b/src/components/application-ui/templates/auth-pages/AuthPage01.jsx
@@ -5,7 +5,7 @@ export const codeSnippet = `<!-- This component requires the Tailwind CSS Forms
 To use this plugin, install it via npm by running 'npm install @tailwindcss/forms'. 
 Then, include the plugin in your Tailwind CSS configuration file (tailwind.config.js) by adding 'require('@tailwindcss/forms')' to the plugins array. -->
 
-<section class="flex h-screen items-center justify-center">
+<section class="flex lg:h-screen h-auto items-center justify-center">
   <form class="flex w-full max-w-md flex-col items-center justify-center rounded-lg p-10 shadow-xl">
     <div class="w-full space-y-8">
       <div class="flex flex-col items-center gap-5">
@@ -63,7 +63,7 @@ Then, include the plugin in your Tailwind CSS configuration file (tailwind.confi
 const AuthPage01 = () => {
   return (
     <div className='w-full h-auto p-2'>
-      <section className="flex h-screen items-center justify-center">
+      <section className="flex lg:h-screen h-auto items-center justify-center">
         <form className="flex w-full max-w-md flex-col items-center justify-center rounded-lg p-10 shadow-xl">
           <div className="w-full space-y-8">
             <div className="flex flex-col items-center gap-5">

diff --git a/src/components/application-ui/templates/auth-pages/AuthPage03.jsx b/src/components/application-ui/templates/auth-pages/AuthPage03.jsx
@@ -12,8 +12,8 @@ Then, include the plugin in your Tailwind CSS configuration file (tailwind.confi
       <span class="text-sm text-zinc-300">fmUI is a comprehensive collection of free Tailwind CSS components and templates for your projects. With diverse components and sample pages, you can develop websites, web apps, and more. Explore our selection to enhance your development process with ease and flexibility.</span>
     </div>
   </aside>
-  <main class="flex h-screen items-center justify-center">
-    <form class="flex w-full max-w-md flex-col items-center justify-center px-7">
+  <main class="flex lg:h-screen h-auto items-center justify-center">
+    <form class="flex w-full max-w-md flex-col items-center justify-center px-7 py-9">
       <div class="w-full space-y-8">
         <div class="flex flex-col items-center gap-9">
           <img src="https://github.com/fwedwicc/fmUI/blob/main/src/assets/fmUI-logo.png?raw=true" alt="Your Logo" class="h-auto w-20" />
@@ -75,8 +75,8 @@ const AuthPage03 = () => {
             </span>
           </div>
         </aside>
-        <main className="flex h-screen items-center justify-center">
-          <form className="flex w-full max-w-md flex-col items-center justify-center px-7">
+        <main className="flex lg:h-screen h-auto items-center justify-center">
+          <form className="flex w-full max-w-md flex-col items-center justify-center px-7 py-9">
             <div className="w-full space-y-8">
               <div className="flex flex-col items-center gap-9">
                 <img