From a60df27093fbfca81969343f5c563bd20f96cf6b Mon Sep 17 00:00:00 2001
From: Manav <manav@mrmr.io>
Date: Wed, 22 Nov 2023 15:15:28 +0530
Subject: [PATCH] Position absolutely to show on top of each other

---
 pages/quotes/index.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/pages/quotes/index.tsx b/pages/quotes/index.tsx
index 277b497c..41b0fe04 100644
--- a/pages/quotes/index.tsx
+++ b/pages/quotes/index.tsx
@@ -66,7 +66,7 @@ const QuoteContainer: React.FC<
 > = ({ quoteIndex, children }) => {
     return (
         <QuoteContainer_>
-            <TransitionGroup appear={true}>
+            <TransitionGroup>
                 <CSSTransition
                     key={quoteIndex.toString()}
                     classNames="fade"
@@ -82,12 +82,22 @@ const QuoteContainer: React.FC<
 const QuoteContainer_ = styled.div`
     background-color: red;
 
+    position: relative;
+
+    div {
+        border: 1px solid green;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+    }
     .fade-enter {
         opacity: 0;
+        z-index: 1;
     }
     .fade-enter-active {
         opacity: 1;
-        transition: opacity 1000ms 1000ms;
+        transition: opacity 1000ms;
     }
     .fade-exit {
         opacity: 1;