-
-
Notifications
You must be signed in to change notification settings - Fork 170
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
20 changed files
with
258 additions
and
90 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@farmfe/js-plugin-tailwindcss": patch | ||
| --- | ||
|
|
||
| use configResolve instead of config hooks |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| { | ||
| "name": "bench", | ||
| "version": "1.0.34", | ||
| "version": "1.0.35", | ||
| "private": true, | ||
| "description": "", | ||
| "scripts": {}, | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| import React, { useState } from 'react' | ||
|
|
||
| export const WiggleButton = () => ( | ||
| <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded animate-wiggle"> | ||
| Wiggle Me! | ||
| </button> | ||
| ) | ||
|
|
||
| export const FloatingCard = () => ( | ||
| <div className="bg-white p-6 rounded-lg shadow-lg animate-float"> | ||
| <h2 className="text-xl font-bold mb-2">Floating Card</h2> | ||
| <p>This card gently floats up and down.</p> | ||
| </div> | ||
| ) | ||
|
|
||
| export const FadeInText = () => { | ||
| const [show, setShow] = useState(false) | ||
| return ( | ||
| <div> | ||
| <button | ||
| onClick={() => setShow(!show)} | ||
| className="bg-purple-500 text-white px-4 py-2 rounded mb-4" | ||
| > | ||
| Toggle Fade | ||
| </button> | ||
| {show && ( | ||
| <p className="text-2xl font-bold text-purple-600 animate-fadeIn"> | ||
| I fade in smoothly! | ||
| </p> | ||
| )} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export const SlideInPanel = () => { | ||
| const [show, setShow] = useState(false) | ||
| return ( | ||
| <div> | ||
| <button | ||
| onClick={() => setShow(!show)} | ||
| className="bg-green-500 text-white px-4 py-2 rounded mb-4" | ||
| > | ||
| Toggle Slide | ||
| </button> | ||
| {show && ( | ||
| <div className="bg-green-500 text-white p-4 rounded-lg animate-slideIn"> | ||
| <h3 className="text-xl font-bold">Sliding Panel</h3> | ||
| <p>I slide in from the left!</p> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export const PulsingIcon = () => ( | ||
| <div className="w-12 h-12 rounded-full bg-red-500 animate-pulse"></div> | ||
| ) | ||
|
|
||
| export const BouncingBall = () => ( | ||
| <div className="w-12 h-12 rounded-full bg-yellow-500 animate-bounce"></div> | ||
| ) | ||
|
|
||
| export const SpinningLoader = () => ( | ||
| <div className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div> | ||
| ) | ||
|
|
||
| export const PingingCircle = () => ( | ||
| <span className="relative flex h-3 w-3"> | ||
| <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span> | ||
| <span className="relative inline-flex rounded-full h-3 w-3 bg-sky-500"></span> | ||
| </span> | ||
| ) | ||
|
|
||
| export const ScalingSquare = () => ( | ||
| <div className="w-12 h-12 bg-purple-500 animate-scale"></div> | ||
| ) | ||
|
|
||
| export const ShakingInput = () => ( | ||
| <input | ||
| type="text" | ||
| placeholder="Type and watch me shake!" | ||
| className="border-2 border-gray-300 p-2 rounded animate-shake" | ||
| /> | ||
| ) | ||
|
|
||
| export const FlippingCard = () => ( | ||
| <div className="w-32 h-32 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-lg animate-rotateY"></div> | ||
| ) | ||
|
|
||
| export const TypingText = () => ( | ||
| <div className="w-64 overflow-hidden border-r-2 border-black"> | ||
| <p className="font-mono text-lg whitespace-nowrap overflow-hidden animate-typing"> | ||
| Welcome to animations! | ||
| </p> | ||
| </div> | ||
| ) | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,44 @@ | ||
| import React from 'react'; | ||
| import logo from './logo.svg?url'; | ||
| import { useState } from 'react'; | ||
|
|
||
| const App = () => { | ||
| const [count, setCount] = useState(0); | ||
| import React from 'react' | ||
| import { | ||
| WiggleButton, | ||
| FloatingCard, | ||
| FadeInText, | ||
| SlideInPanel, | ||
| PulsingIcon, | ||
| BouncingBall, | ||
| SpinningLoader, | ||
| PingingCircle, | ||
| ScalingSquare, | ||
| ShakingInput, | ||
| FlippingCard, | ||
| TypingText | ||
| } from './AnimatedComponents' | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <div className="text-center"> | ||
| <header className="bg-slate-700 min-h-screen flex flex-col items-center justify-center text-[calc(10px + 2vmin)] text-white"> | ||
| <img | ||
| src={logo} | ||
| className="animate-spin h-[20vmin] pointer-events-none" | ||
| alt="logo" | ||
| /> | ||
| <p> | ||
| Edit <code>src/App.tsx</code> and save to reload. | ||
| </p> | ||
| <a | ||
| className="text-red-600 text-[28px]" | ||
| href="https://github.com/tailwindcss/tailwindcss" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| Learn Tailwindcss | ||
| </a> | ||
| <button className="mt-6" onClick={() => setCount(count + 1)}> | ||
| Count: {count} | ||
| </button> | ||
| </header> | ||
| <div className="min-h-screen bg-gray-100 py-12 px-4 sm:px-6 lg:px-8"> | ||
| <div className="max-w-7xl mx-auto"> | ||
| <h1 className="text-4xl font-bold text-center mb-12">12 Tailwind CSS Animations</h1> | ||
| <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | ||
| <AnimationCard title="3. Fade In Text" component={<FadeInText />} /> | ||
| <AnimationCard title="4. Slide In Panel" component={<SlideInPanel />} /> | ||
| <AnimationCard title="5. Pulsing Icon" component={<PulsingIcon />} /> | ||
| <AnimationCard title="6. Bouncing Ball" component={<BouncingBall />} /> | ||
| <AnimationCard title="7. Spinning Loader" component={<SpinningLoader />} /> | ||
| <AnimationCard title="8. Pinging Circle" component={<PingingCircle />} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const AnimationCard = ({ title, component }: { title: string, component: React.ReactNode }) => ( | ||
| <div className="bg-white p-6 rounded-lg shadow-md"> | ||
| <h2 className="text-xl font-semibold mb-4">{title}</h2> | ||
| <div className="flex items-center justify-center h-40"> | ||
| {component} | ||
| </div> | ||
| ); | ||
| }; | ||
| </div> | ||
| ) | ||
|
|
||
|
|
||
| export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| @import 'tailwindcss'; | ||
| @import 'tailwindcss'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.