raivikas

Posted on May 21, 2022 • Originally published at nextjsdev.com on May 8, 2022

Let's build Social Proof Section using React.js & Tailwind CSS.

#tailwindcss #nextjs

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 challenge that we will build.

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

🚀 Live Demo of the Project

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.

npx create-next-app -e with-tailwindcss my-project-name

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.

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;

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 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.

HeaderText.tsx
Star.tsx
StarRating.tsx
TestimonialCard.tsx
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.

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>
  )
}

The Star.tsx Component

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

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>

    )
}

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.

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>
  )
}

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.

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>
  )
}

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.

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>
    )
}

The main challenge here is as you can see in the FrontendMentor 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

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

Conclusion

Hope you were able to build this Social Proof Section. Feel free to follow me on Twitter 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 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 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

Github link for the project

Connect with me: