Fixed active support for ios

Author: Solankimimoh

.idea/workspace.xml

@@ -2,6 +2,7 @@
 const config = {
   plugins: {
     '@tailwindcss/postcss': {},
+    tailwindcss: {},
     autoprefixer: {},
   },
 };

postcss.config.mjs

@@ -6,7 +6,7 @@ import { LuCalendarPlus } from 'react-icons/lu';
 const CalendarButton = ({ onClick }) => (
   <button
     onClick={onClick}
-    className="absolute top-4 right-4 p-2 text-gray-500 hover:text-blue-800 hover:bg-blue-100 rounded-lg transition-colors duration-200 z-10 cursor-pointer"
+    className="absolute top-4 right-4 p-2 text-gray-500 hover:text-blue-800 active:text-blue-800 hover:bg-blue-100 active:bg-blue-100 rounded-lg transition-colors duration-200 z-10 cursor-pointer"
     aria-label="Add to calendar"
     title="Add to calendar"
   >

src/components/elements/CalendarButton.js

@@ -8,10 +8,7 @@ const QuickTips = ({ tips }) => {
   if (!tips || tips.length === 0) return null;
 
   return (
-    <div
-      className="bg-white  rounded-2xl p-6 lg:p-8 lg:sticky lg:top-8 overflow-hidden shadow-md ring-2
-         ring-gray-300"
-    >
+    <div className="bg-white rounded-2xl p-6 lg:p-8 lg:sticky lg:top-8 overflow-hidden shadow-md ring-2 ring-gray-300">
       <h2 className="text-xl font-bold text-gray-900 mb-1">{tips.title}</h2>
       <p className="text-sm text-gray-600 mb-6">{tips.subtitle}</p>
 
@@ -23,9 +20,9 @@ const QuickTips = ({ tips }) => {
           return (
             <div
               key={index}
-              className={`flex  items-start gap-3 rounded-xl px-4 py-3 group transition-all duration-300 ease-in-out ${colors.bg} ${colors.text} ${rotation} hover:rotate-0 hover:scale-[1.02] hover:shadow-lg`}
+              className={`flex items-start gap-3 rounded-xl px-4 py-3 group transition-all duration-300 ease-in-out ${colors.bg} ${colors.text} ${rotation} hover:rotate-0 active:scale-[1.02] hover:scale-[1.02] hover:shadow-lg active:shadow-lg`}
             >
-              <div className="mt-0.5 flex-shrink-0 group-hover:rotate-6 transition-all duration-300">
+              <div className="mt-0.5 flex-shrink-0 group-hover:rotate-6 group-active:rotate-6 transition-all duration-300">
                 {IconComponent && <IconComponent size={21} />}
               </div>
               <span className="text-sm font-medium leading-relaxed flex-1">

src/components/elements/QuickTips.js

@@ -15,14 +15,14 @@ const ScheduleSpeakerInfo = ({ speaker, locale = 'en' }) => {
       title={`${name} - ${title}`}
     >
       <Image
-        className="h-11 w-11 rounded shadow object-cover group-hover/a:shadow-md group-hover/a:scale-[105%]  transition-all duration-200 ease-in"
+        className="h-11 w-11 rounded shadow object-cover group-hover/a:shadow-md group-active/a:shadow-md group-hover/a:scale-[105%] group-active/a:scale-[105%] transition-all duration-200 ease-in"
         src={image}
         alt={name}
         width={44}
         height={44}
       />
       <div>
-        <p className="text-base font-semibold tracking-normal text-gray-800 group-hover/a:text-blue-800 transition-colors duration-200">
+        <p className="text-base font-semibold tracking-normal text-gray-800 group-hover/a:text-blue-800 group-active/a:text-blue-800 transition-colors duration-200">
           {name}
         </p>
         <p className="text-xs text-gray-500">{title}</p>

src/components/elements/ScheduleSpeakerInfo.js

@@ -16,7 +16,7 @@ const SpecialEventCard = ({
   const IconComponent = icon ? getIcon(icon) : null;
 
   return (
-    <div className="bg-white rounded-2xl shadow hover:shadow-xl transition-all duration-200 ease-in hover:-translate-y-1.5 p-4 ring-2 ring-gray-300 sm:p-6 relative overflow-hidden group">
+    <div className="bg-white rounded-2xl shadow hover:shadow-xl  active:shadow-xl transition-all duration-200 ease-in active:-translate-y-1.5 hover:-translate-y-1.5 p-4 ring-2 ring-gray-300 sm:p-6 relative overflow-hidden group">
       <div className="pr-12">
         <h3 className="text-xl font-bold text-gray-700">{title}</h3>
         {description && (