Let's build Social Proof Section using React.js & Tailwind CSS.
Tags: tailwindcss, nextjs
Published: 2022-05-21 02:33:21

---
title: Let's build Social Proof Section using React.js & Tailwind CSS.
published: true
date: 2022-05-08 07:09:00 UTC
tags: TailwindCSS ,Nextjs
canonical_url: https://nextjsdev.com/lets-build-social-proof-section-using-react-js-tailwind-css/
---

 ![Let's build Social Proof Section using React.js & Tailwind CSS.](https://nextjsdev.com/content/images/2022/04/tailwindcss-5.PNG)

Hello everyone,  I hope you all are doing well. I am back with another exciting web dev project, which will help to learn some new web dev skills as a Front-end developer.

In this tutorial, I will show you how you can build a Social Proof Section of a website. It is one of the  Frontend Mentor challenge projects and our goal is to make it look like the design given by the Frontend Mentor.

Here is the link to the [FrontendMentor](https://www.frontendmentor.io/challenges/social-proof-section-6e0qTv_bA) challenge that we will build.

So without any further talk, Let's get started 🚀.

[🚀 Live Demo of the Project](https://social-proof-section-raivikas.vercel.app/)

I want to mention one thing, this project is all about designing there is no use for any React.js hooks or any programming thing.

We will be using Tailwind CSS, as a CSS framework to design our web application.

>💡 We are using TypeScript in this Project, so we have to explicitly define all the props, constants & function data types.

### Step-1 Create the starting project

Create a new next-js app with Tailwind CSS bootstrapped in it.

You can use this one-line command to create a new Next.js app with TypeScript and Tailwind CSS.

<!--kg-card-begin: markdown-->
```bash
npx create-next-app -e with-tailwindcss my-project-name

```
<!--kg-card-end: markdown-->

You can name your project whatever you want, I will name it as **social-proof-section.**

Now after creating the project open it in Vs Code or any IDE that you prefer.

Find the **index.tsx** file inside **pages** directory and delete everything and paste the given code below.

<!--kg-card-begin: markdown-->
```jsx
import type { NextPage } from 'next'
import Head from 'next/head'

const Home: NextPage = () => {

return (
    <div className="flex min-h-screen flex-col items-center bg-[#1e1f29]">
      <Head>
        <title>Social Proof Section</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

)}

export default Home;

```
<!--kg-card-end: markdown-->

After that move to the second step.

### Step-2 Creating the Components

Now, it is time to create some components that we are going to use in the app.

If you visit the [FrontendMentor](https://www.frontendmentor.io/challenges/social-proof-section-6e0qTv_bA) challenge link, you will see that there are three different types of components  Heading Text, Start Rating, and the Testimonial Card.

Create a new folder name **components** in the root of the directory, and create 5 files inside it.

1. **HeaderText.tsx**
2. **Star.tsx**
3. **StarRating.tsx**
4. **TestimonialCard.tsx**
5. **Testimonials.tsx**

After creating the file we will start adding the code to each file one by one.

**The HeaderText.tsx Component**

This component consists of an **H1 tag** and a **P tag** which are placed inside a Div tag.

<!--kg-card-begin: markdown-->
```jsx
import React from 'react'

const SUB_TEXT="We only provide great products with excellent customer service. See what our satisfied customer are saying about our services.";

const HEAD_TEXT="10,000+ of our users loves our products.";

export const HeaderText = () => {
  return (
    <div className="group flex flex-col w-3/4 md:w-1/3 space-y-6 md:space-y-8 px-6 py-6 rounded-lg justify-start mt-6">
      <h1 className="text-3xl md:w-[360px] md:text-5xl text-fuchsia-800 font-bold">{HEAD_TEXT}</h1>
      <p className="text-md md:text-lg text-purple-900 font-medium">{SUB_TEXT}</p>
    </div>
  )
}

```
<!--kg-card-end: markdown-->

**The Star.tsx Component**

This component consists of an **SVG** of a Star which will be used inside the StarRating.tsx Component.

<!--kg-card-begin: markdown-->
```jsx
import React from 'react'

export const Star = () => {
    return (
        
<svg xmlns="http://www.w3.org/2000/svg" className=" h-5 w-5 text-fuchsia-500 group-hover:text-fuchsia-100" viewBox="0 0 20 20" fill="currentColor">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
 </svg>
        
    )
}

```
<!--kg-card-end: markdown-->

**The StarRating.tsx Component**

It consists of **5 Star.tsx Component** and a **P tag** which is placed inside a Div Tag and is made to be in **Flex-row** direction.

<!--kg-card-begin: markdown-->
```jsx
import React from 'react'
import { Star } from './Star'

interface Prop{
  text:string,
}

export const StarRating = ({text} :Prop) => {
  return (
    <div className="w-[260px] md:w-[350px] group flex flex-col space-y-2 py-2 md:flex-row items-center md:justify-start md:space-y-0 md:space-x-4 my-4 px-4 md:py-3 bg-fuchsia-300 rounded-md cursor-pointer hover:bg-fuchsia-500 transition duration-300 ease-in shadow-md hover:shadow-xl md:even:ml-16 md:last:ml-32">
        <div className="flex space-x-1">
           <Star />
           <Star />
           <Star />
           <Star />
           <Star />
        </div>
        <p className="text-sm flex justify-start items-center md:text-md font-semibold text-fuchsia-700 group-hover:text-fuchsia-200 ">{text}</p>
    </div>
  )
}

```
<!--kg-card-end: markdown-->

**The TestimonialCard.tsx Component**

It consists of an **Image Tag, H2 Tag, P tag, and  Div Tag** , It is a simple Card Component with some good design and hover animations.

<!--kg-card-begin: markdown-->
```jsx
import Image from 'next/image'
import React from 'react'

interface TesimonialProps {
  customerName: string,
  testimonialText: string,
  imageURL: string,
}

export const TestimonialCard = ({ customerName, testimonialText, imageURL }: TesimonialProps) => {
  return (
    <div className={`group w-3/4 md:w-[420px] md:h-[240px] flex flex-col items-start md:space-x-4 bg-gradient-to-r from-[#975297] to-[#502050] mt-4 md:even:mt-16 md:last:mt-32 px-6 py-6 rounded-2xl cursor-pointer hover:shadow-md hover:bg-gradient-to-r hover:from-[#ce74ff] hover:to-[#743c8a] transition duration-1000 ease-in-out `}>
      <div className="flex space-x-5 pb-4 md:space-x-6 md:px-4 ">
        <div className="w-[50px] h-[50px] rounded-full ring-4 ring-fuchsia-400 group-hover:ring-fuchsia-100">

          <Image
            src={imageURL}
            objectFit="contain"
            width={50}
            height={50}
            className="rounded-full"
          />
        </div>

        <div className=" flex flex-col items-start justify-start">
          <h2 className="text-md md:text-2xl font-bold text-fuchsia-400 group-hover:text-fuchsia-100 ">{customerName}</h2>
          <p className="text-xs md:text-md font-extralight text-gray-100 ml-1 group-hover:text-fuchsia-50">Verified Buyer</p>
        </div>

      </div>

      <div className="text-md md:text-lg text-fuchsia-200 font-500 py-2">
        {testimonialText}
      </div>
    </div>
  )
}

```
<!--kg-card-end: markdown-->

The background of the Card is a gradient background.

**The Testimonials.tsx Component**

It consists of 3 **TestimonialCard.tsx** Components which are placed inside a **Div Tag** in **the Flex-row** direction.

<!--kg-card-begin: markdown-->
```js
import React from 'react'
import { TestimonialCard } from './TestimonialCard'

const TESTIMONIAL_DATA = [

    {
        customerName: "Colton Smith",
        imageURL: "/image-colton.jpg",
        testimonialText: "We needed the same printed design as the one we had ordered a week prior.Not only did they find the original order, but we also received it in time.Excellent!",

    },

    {
        customerName: "Irene Roberts",
        imageURL: "/image-irene.jpg",
        testimonialText: "Customer service is always excellent and very quick turn around. Completely delighted with the simplicity of the purchase and the speed of delivery.",
           
    },

    {
        customerName: "Anne Wallace",
        imageURL: "/image-anne.jpg",
        testimonialText: "Put an order with this company and can only praise them for the very high standard. Will definitely use them again and recommend them to everyone!",
           
    },

];

export const Testimonials = () => {
    return (
        <div className="flex flex-col md:flex-row justify-center items-center gap-10">
            {
                TESTIMONIAL_DATA.map((item) => {
                    return <TestimonialCard customerName={item.customerName} imageURL={item.imageURL} testimonialText={item.testimonialText} />
                })

            }
        </div>
    )
}

```
<!--kg-card-end: markdown-->

The main challenge here is as you can see in the [FrontendMentor](https://www.frontendmentor.io/challenges/social-proof-section-6e0qTv_bA) challenge design, the **StarRating.tsx** and **TestimonialCard.tsx** component are shifted.

In the Case of **StarRating.tsx  Component,** the 2nd and 3rd have some Left Margin and in the case of **the TestimonialCard.tsx  Component, they** have some Top Margin.

So to achieve these design we have to add two special classes **even:ml-16 and last:ml-32  ** in StartRating.tsx Component and **even:mt-16 and last:mt-32** in TestimonialCard.tsx Component.

>💡 What these two classes are doing is that every **even position** children element inside the div or a section will have a margin-top or margin-left equal to 16px, and every last child inside the div or a section will have a margin-top or margin-left equal to 32px.

### Step-3 Import the Components

Now it's time to import the component that we have created inside the index.tsx file inside the Pages folder.

**Inside  Index.tsx Page**

<!--kg-card-begin: markdown-->
```jsx
import type { NextPage } from 'next'
import Head from 'next/head'
import { HeaderText } from '../components/HeaderText';
import { StarRating } from '../components/StarRating'
import { Testimonials } from '../components/Testimonials';

const Home: NextPage = () => {
  return (
    <div className="flex min-h-screen background flex-col bg-gray-100 items-center ">
      <Head>
        <title>Social Proof Section</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
  

       <div className="flex flex-col md:flex-row items-center justify-between mx-a px-4 md:px-24 py-2 ">
        <HeaderText />
        <div className="flex flex-col justify-center items-center">
          <StarRating text="Rated 5 Stars in Reviews" />
          <StarRating text="Rated 5 Stars in Report Guru" />
          <StarRating text="Rated 5 Stars in Best Tech" />
        </div>
      </div>
      <Testimonials />

    </div>
  )
}

export default Home

```
<!--kg-card-end: markdown-->
### Conclusion

Hope you were able to build this **Social Proof Section**.  Feel free to follow me on [Twitter](https://twitter.com/raivikas200) and share this if you like this project 😉.

I hope you like this project and enjoyed building it, I would appreciate ✌️ it if you could share this blog post.

If you think that this was helpful and then please do consider visiting my blog website [nextjsdev.com](https://nextjsdev.com/) and do follow me on **Twitter** and connect with me on **LinkedIn**.

If you were stuck somewhere and not able to find the solution you can check out my completed [Github Repo](https://github.com/raiv200/Social-Proof-Section) here.

Thanks for your time to read this project, if you like this please share it on Twitter and Facebook or any other social media and tag me there.

I will see you in my next blog ✌️. Till then take care and keep building projects.

Some Useful Link:

[Next.js and Tailwind Installation Docs](https://tailwindcss.com/docs/guides/nextjs)

[Github link for the project](https://github.com/raiv200/Social-Proof-Section)

**Connect with me:**

[Twitter Profile](https://twitter.com/raivikas200)

[LinkedIn Profile](https://www.linkedin.com/in/raivikas200/)

[GitHub Profile](https://github.com/raiv200)

[Facebook Profile](https://facebook.com/raivikas200)