feat: tailwind

Author: wkylin

src/components/stateless/MusicPlayer/index.jsx

@@ -169,9 +169,9 @@ const MusicPlayer = () => {
   const remainingTime = duration - currentTime
 
   return (
-    <div className="mx-auto flex h-[700px] max-w-md flex-col overflow-hidden rounded-2xl bg-gray-900 font-sans text-white shadow-2xl">
+    <div className="mx-auto flex h-175 max-w-md flex-col overflow-hidden rounded-2xl bg-gray-900 font-sans text-white shadow-2xl">
       {/* === 上半部分：播放器控制 === */}
-      <div className="z-10 flex flex-col items-center bg-gradient-to-br from-gray-800 to-gray-900 p-6 shadow-lg">
+      <div className="z-10 flex flex-col items-center bg-linear-to-br from-gray-800 to-gray-900 p-6 shadow-lg">
         {/* 封面 & 旋转动画 */}
         <div
           className={`relative mb-6 h-56 w-56 overflow-hidden rounded-full border-8 border-gray-800 shadow-2xl ${isPlaying ? 'animate-[spin_12s_linear_infinite]' : ''}`}
@@ -282,9 +282,9 @@ const MusicPlayer = () => {
                 <div className="mr-2 flex w-10 items-center justify-center">
                   {isCurrent && isPlaying ? (
                     <div className="flex h-3 items-end gap-1">
-                      <span className="h-full w-0.5 animate-[bounce_1s_infinite] bg-green-500"></span>
-                      <span className="h-2/3 w-0.5 animate-[bounce_1.2s_infinite] bg-green-500"></span>
-                      <span className="h-1/2 w-0.5 animate-[bounce_0.8s_infinite] bg-green-500"></span>
+                      <span className="h-full w-0.5 animate-bounce bg-green-500"></span>
+                      <span className="h-2/3 w-0.5 animate-bounce bg-green-500" style={{ animationDelay: '0.2s' }}></span>
+                      <span className="h-1/2 w-0.5 animate-bounce bg-green-500" style={{ animationDelay: '0.4s' }}></span>
                     </div>
                   ) : (
                     <span className={`font-mono text-sm ${isCurrent ? 'text-green-500' : 'text-gray-600'}`}>

src/pages/contact/index.jsx

@@ -122,7 +122,7 @@ const Contact = () => {
             color: colorText,
           }}
         >
-          <h2 className="mb-4 bg-gradient-to-r from-blue-400 to-purple-600 bg-clip-text text-center text-3xl font-bold text-transparent md:text-5xl">
+          <h2 className="mb-4 bg-linear-to-r from-blue-400 to-purple-600 bg-clip-text text-center text-3xl font-bold text-transparent md:text-5xl">
             Get in Touch
           </h2>
           <form onSubmit={handleSubmit} className="space-y-6">
@@ -186,7 +186,7 @@ const Contact = () => {
 
             <button
               type="submit"
-              className="flex w-full items-center justify-center space-x-2 rounded-xl bg-gradient-to-r from-blue-500 to-purple-600 px-6 py-3 font-semibold text-white backdrop-blur-sm transition-all duration-300 hover:from-blue-600 hover:to-purple-700 hover:shadow-lg"
+              className="flex w-full items-center justify-center space-x-2 rounded-xl bg-linear-to-r from-blue-500 to-purple-600 px-6 py-3 font-semibold text-white backdrop-blur-sm transition-all duration-300 hover:from-blue-600 hover:to-purple-700 hover:shadow-lg"
             >
               <span>Send Message</span>
               <AnimatedIcon variant="spin" mode="hover">

src/pages/demo/index.jsx

@@ -384,7 +384,7 @@ const ProDemo = () => {
             {animatedListItems.map((item) => (
               <div key={item.id} className="flex flex-col items-center justify-center gap-4">
                 <div className="flex items-center justify-center gap-4">
-                  <div className="h-16 w-100 rounded-full bg-gradient-to-br from-purple-500 to-blue-500" />
+                  <div className="h-16 w-100 rounded-full bg-linear-to-br from-purple-500 to-blue-500" />
                 </div>
               </div>
             ))}

src/pages/home/index.jsx

@@ -863,7 +863,7 @@ const Home = () => {
           secondImage={secondImage}
           firstImageClassName="object-cover object-left-top"
           secondImageClassName="object-cover object-left-top"
-          className="h-[200px]"
+          className="h-50"
           slideMode="drag"
         />
       </section>