Free Tailwind Animations

<div className="animate-shakeVertical">Shake Vertical</div>

...

keyframes: {
    shakeVertical: {
        '0%, 100%': {
            transform: 'translate(0, 0)',
        },
        '10%, 30%, 50%, 70%, 90%': {
            transform: 'translateY(30px)',
        },
        '20%, 40%, 60%, 80%': {
            transform: 'translateY(-30px)',
        }
    }
}
animation: {
    shakeVertical: 'shakeVertical ease-out 1s'
}

...

<div className="animate-shakeHorizontal">Shake Horizontal</div>

...

keyframes: {
    shakeHorizontal: {
        '0%, 100%': {
            transform: 'translate(0, 0)',
        },
        '10%, 30%, 50%, 70%, 90%': {
            transform: 'translateX(30px)',
        },
        '20%, 40%, 60%, 80%': {
            transform: 'translateX(-30px)',
        }
    }
}
animation: {
    shakeHorizontal: 'shakeHorizontal ease-out 1s'
}

...

<div className="animate-flash">Flash</div>

...
keyframes: {
        flash: {
                '0%, 100%': {
                        opacity: '1'
                },
                '50%': {
                        opacity: '0'
                },
        }
},
animation: {
        flash: 'flash 2.5s infinite ease-in-out'
}
...

<div className="animate-wiggle">Wiggle</div>

...

keyframes: {
    wiggle: {
        '0%, 100%': {
            transform: 'rotate(-3deg)',
        },
        '50%': {
            transform: 'rotate(3deg)',
        },
    }
},
animation: {
    wiggle: 'wiggle 1s ease-in-out'
}

...

<div className="animate-fadeInSlideRightDown">Fade In Slide Right Down</div>

...
keyframes: {
        fadeInSlideRightDown: {
                '0%': {
                        opacity: '0',
                        transform: 'translateX(-100px) translateY(-100px)'
                },
                '100%': {
                        opacity: '1',
                        transform: 'translate(0)'
                },
        }
},
animation: {
        fadeInSlideRightDown: 'fadeInSlideRightDown 3s ease-out'
}
...

<div className="animate-fadeInSlideLeftDown">Fade In Slide Left Down</div>

...
keyframes: {
        fadeInSlideLeftDown: {
                '0%': {
                        opacity: '0',
                        transform: 'translateX(100px) translateY(-100px)'
                },
                '100%': {
                        opacity: '1',
                        transform: 'translate(0)'
                },
        }
},
animation: {
        fadeInSlideLeftDown: 'fadeInSlideLeftDown 3s ease-out'
}
...

<div className="animate-fadeInSlideLeftUp">Fade In Slide Left Up</div>

...
keyframes: {
    fadeInSlideLeftUp: {
        '0%': {
            opacity: '0',
                transform: 'translateX(100px) translateY(100px)'
            },
        '100%': {
            opacity: '1',
            transform: 'translate(0)'
        },
    }
},
animation: {
        fadeInSlideLeftUp: 'fadeInSlideLeftUp 3s ease-out'
}
...

<div className="animate-fadeInSlideRightUp">Fade In Slide Right Up</div>

...
keyframes: {
        fadeInSlideRightUp: {
                '0%': {
                        opacity: '0',
                        transform: 'translateX(-100px) translateY(100px)'
                },
                '100%': {
                        opacity: '1',
                        transform: 'translate(0)'
                },
        }
},
animation: {
        fadeInSlideRightUp: 'fadeInSlideRightUp 3s ease-out'
}
...

<div className="animate-fadeInSlideDown">Fade In Slide Down</div>

...
keyframes: {
        fadeInSlideDown: {
                '0%': {
                        opacity: '0',
                        transform: 'translateY(-100px)'
                },
                '100%': {
                        opacity: '1',
                        transform: 'translateY(0)'
                },
        }
},
animation: {
        fadeInSlideDown: 'fadeInSlideDown 3s ease-out'
}
...

<div className="animate-fadeInSlideUp">Fade In Slide Up</div>

...
keyframes: {
        fadeInSlideUp: {
                '0%': {
                        opacity: '0',
                        transform: 'translateY(100px)'
                },
                '100%': {
                        opacity: '1',
                        transform: 'translateY(0)'
                },
        }
},
animation: {
        fadeInSlideUp: 'fadeInSlideUp 3s ease-out'
}
...

<div className="animate-fadeInSlideLeft">Fade In Slide Left</div>

...
keyframes: {
        fadeInSlideLeft: {
                '0%': {
                        opacity: '0',
                        transform: 'translateX(100px)'
                },
                '100%': {
                        opacity: '1',
                        transform: 'translateX(0)'
                },
        }
},
animation: {
        fadeInSlideLeft: 'fadeInSlideLeft 3s ease-out'
}
...

<div className="animate-fadeInSlideRight">Fade In Slide Right</div>

...
keyframes: {
        fadeInSlideRight: {
                '0%': {
                        opacity: '0',
                        transform: 'translateX(-100px)'
                },
                '100%': {
                        opacity: '1',
                        transform: 'translateX(0)'
                },
        }
},
animation: {
        fadeInSlideRight: 'fadeInSlideRight 3s ease-out'
}
...

<div className="animate-wobble">Wobble</div>

...

keyframes: {
    wobble: {
        '0%, 100%': {
            transform: 'rotate(-3deg) translateX(-10px)',
        },
        '50%': {
            transform: 'rotate(3deg) translateX(10px)',
        }
    }  
},
animation: {
    wobble: 'wobble 1s ease-in-out infinite'
}

...

<div className="animate-jump">Jump</div>

...

keyframes: {
    jump: {
        from: {
            transform: 'translateY(0px)',
        },
        to: {
            transform: 'translateY(-25px)',
        },
    }
},
animation: {
    jump: 'jump .5s alternate infinite'
}
        
...