Docs
Join US Card

Join US Card

A card component designed to encourage users to join your community or organization, featuring interactive animations to enhance user engagement and provide a visually appealing call to action.

BuouUI

Get Infomation to your inbox every week.

Installation

Update tailwind.config.js

Add the following animations to your tailwind.config.js file:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
       keyframes: {
            shake: {
            "0%": { transform: "rotate(0deg)" },
            "25%": { transform: "rotate(7deg)" },
            "50%": { transform: "rotate(-7deg)" },
            "75%": { transform: "rotate(1deg)" },
            "100%": { transform: "rotate(0deg)" },
            },
        },
       animation: {
         shake: "shake 1s ease-in-out both",
      },
    },
  },
}

Copy and paste the cn util code into your project.

import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
 
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Copy and paste the code into your project.

Bill CardRetro Style Card