A functional React component, stylized with Tailwind CSS, that takes User information gathered from a form and renders a "Testimonial" Card in a Responsive Design flex container that adjusts to different screen sizes, ensuring a good user experience across devices.
This project was based on a GreatFrontEnd project to develop a single Testimonial Card based on the Figma Design specifications.. (The source code for my submission on that project can be viewed at this repository:single-testimonial-card )
I created this component, which builds on that concept by adding the ability to generate multiple cards at once, with three choices for color theme, because I wanted to try out the new Form features in React 19 and to practice using Tailwind CSS and building projects with Vite.
-
Renders a card for each user entered via the form which displays the user's profile picture, name, email, and comments.
-
Choice of three color schemes.
-
Component can be easily extended or modified to include additional user information or styling as needed.
-
The profile picture is a placeholder image imported from assets, which can easily be changed to the actual picture.
-
Styled with Tailwind CSS classes for a responsive and modern look.
-
The component uses a dark mode theme with appropriate styling for light and dark backgrounds.
-
The cards are displayed in a flex container that centers them both vertically and horizontally on the page.
-
Responsive Design adjusts to different screen sizes, ensuring a good user experience across devices.
-
Functional component that does not maintain any internal state, making it simple and efficient for rendering static data.
-
Modular design and reusability: component can be imported and used in other applications apps and websites or be used independently to generate code for the cards.
- Vite v7 (Vite requires Node.js version 20.19+, 22.12+.)
- React v19.1
- @vitejs/plugin-react-swc
- TailwindCSS v4.1
- Figma for original Testimonial Card design implementation
- Clone the repository
git clone https://github.com/notavailable4u
- Navigate to project directory
cd dir
- Install Dependencies
npm install
- Start the dev server
npm run dev
- App will open in your browser at http://localhost:5173
Input Form
Input Form - Dark Mode
Testimonial Card - Original Theme - Gray
Testimonial Card - Alternate Theme 1 - Blue
Testimonial Card - Alternate Theme 2 - Green
Pixel 7 Pro Mockup View
