FreeSocial Proof

Review Card Wall

Use this component for testimonials, marketplace reviews, service proof, and product trust sections.

ReactTailwind CSSMotionReviews

*****

Fast launch

Founder review #1

*****

Sharp design

Founder review #2

*****

Clear handoff

Founder review #3

Overview

A small wall of review cards with hover lift and star-rating presentation.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

npm install framer-motion

Usage

tsx

<ReviewCardWall />

Review Card Wall.tsx

tsx

"use client";

import { motion } from "framer-motion";

const reviews = ["Fast launch", "Sharp design", "Clear handoff"];

export function ReviewCardWall() {
  return (
    <div className="grid gap-3 md:grid-cols-3">
      {reviews.map((review, index) => (
        <motion.div
          key={review}
          whileHover={{ y: -4 }}
          className="rounded-xl border border-white/10 bg-zinc-950 p-4 text-white"
        >
          <div className="mb-4 flex gap-1 text-lime-300">*****</div>
          <p className="text-sm font-semibold">{review}</p>
          <p className="mt-2 text-xs text-zinc-400">Founder review #{index + 1}</p>
        </motion.div>
      ))}
    </div>
  );
}