How to create a Gradient border BlogPostCard using Tailwind CSS and Next.js.
Tags: react, tailwindcss, tutorial, nextjs
Published: 2021-11-23 11:42:05

![Post Featured Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/97t4yvkx7h15t766ntq0.PNG)

Hello everyone,  I  hope you all are well, this is my first post on Dev.to I hope you will like it. 
  
This blog post  is a small tutorial  in which I have showed, how you can create a gradient border blog postcard using Tailwind CSS.
I am assuming that you have some basic knowledge about Tailwind CSS and Next.js .

For this project, I have chosen **Next.js** as a framework because through this one command you can initialize a next-app with **Tailwind CSS**.

```react
npx create-next-app -e with-tailwindcss my-project
cd my-project
```

You may choose other frameworks like react.js, vue.js or you can simply do this in an HTML file also by using the [Tailwind CSS CDN](https://tailwindcss.com/docs/installation).

Now open the project and open the index.js file inside the **Pages** directory.

* Now delete all the code inside the Home() function, so that it looks something like this.

```react
import Head from "next/head";

export default function Home() {
    
    return (
        <div>
         <Head>
            <title>Blog PostCard Tutorial</title>
            <link rel="./favicon.ico" />
         </Head>
       </div>

    );
}
```
* Now create a component folder in the root directory and inside that folder create a BlogPostCard.js file and write the following code shown below.

![Folder Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ro63kaudo5v3e5wu87r6.PNG)

```react
const BlogPostCard = () => {
  return (
   <div className="">
      {/* Gradient background of same width & height  as Blog post card  */}
      <div className="">
        <div className="">
          <div className="">
            {/* PostImage */}

            <img src="/postImage.png" className="" />
            {/* Post title */}

            <h1 className="">
              This is first title.
            </h1>
            {/* Post Data/excerpt */}
            <p className=" ">
              Everything I Know About Style Guides, Design Systems, and
              Component Libraries
            </p>
          </div>
          {/* Author image with data */}
          <div className="">
            <span>
              <img
                src="/author.jpg"
                className=" "
              />
            </span>
            <p className="">
              16 Nov, 2021
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default BlogPostCard;
```

As you can see I have left spaces for the image URL, you can keep the assets in the public folder and you can access them using (/image.jpg).

Now the basic Html structure is ready and now it's time to add tailwind CSS classes.

So , here  I am pasting all the CSS code at once , please take your time to understand.


```react
const BlogPostCard = () => {
  return (
    <div className="relative flex w-1/4 h-[500px] mx-auto mt-10">
      {/* Gradient background of same width & height  as Blog post card  */}
      <div className=" rounded-xl w-full bg-gradient-to-r p-[5px] from-[#7928ca] to-[#ff0080]">
        <div className="flex flex-col justify-between h-full bg-black rounded-lg p-4">
          <div className="flex flex-col justify-center text-white">
            {/* PostImage */}

            <img src="/postImage.png" className="h-52 mb-5 rounded-lg" />
            {/* Post title */}

            <h1 className="text-3xl font-extrabold mb-4">
              This is first title.
            </h1>
            {/* Post Data/excerpt */}
            <p className="text-lg md:text-lg font-medium mb-6  ">
              Everything I Know About Style Guides, Design Systems, and
              Component Libraries
            </p>
          </div>
          {/* Author image with data */}
          <div className=" flex w-full justify-between mb-4">
            <span>
              <img
                src="/author.jpg"
                className="w-[75px] h-[80px] rounded-full  "
              />
            </span>
            <p className="text-lg mr-5 font-semibold text-white flex items-center justify-center">
              16 Nov, 2021
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default BlogPostCard;

```

After all this **import the BlogPostCard from
components/BlogPostCard.js** in the index.js file  and the component <BlogPostCard /> in the **Home() function**.

```react
import Head from "next/head";
import BlogPostCard from "../components/BlogPostCard";

export default function Home() {
  return (
    <div className="bg-black flex flex-col min-h-screen py-2">
      <Head>
        <title>Blog PostCard Tutorial</title>
        <link rel="./favicon.ico" />
      </Head>
      <h1 className="text-8xl font-bold text-indigo-500 mb-10 text-center">Blog PostCard Tutorial</h1>
      <div>

      <BlogPostCard />
      </div>
    </div>
  );
}
```

After all this hardwork , you will see an output like this:

![Ouput Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jtss7wzmme47of2nr05m.PNG)

The trick for creating a gradient border is that you create two **DIV's**, one nested in another and the should be relative to each other, then you give the two **DIV's** same height and width, such that the two DIV's should be stacked on each other.

```html
<div>
  <div>
  
  </div>
<div>
```

Now you provide the gradient background to the bottom  DIV and provide some padding to the upper div.

```html
<div className="rounded-xl w-52 h-64 mx-auto  mt-10 bg-gradient-to-r p-[6px] from-[#6EE7B7] via-[#3B82F6] to-[#9333EA]">
   <div className="flex flex-col justify-between h-full bg-white text-white rounded-lg p-4">
      
     </div>
</div>
```

![Example of Blog Post Card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/073cqpi4fp40g24oahav.PNG)


Then you will see, that the bottom DIV will look like a gradient border for the upper DIV.

This was my first time creating a blog post tutorial , if  I have done any mistake plz give a feedback to me on how I can improve it more.

I hope you enjoyed building this project, and thank you for investing your time in reading this blog. If you enjoyed reading the post or building the project , don't hesitate to show your love and do visit [NextjsDev.com](https://nextjsdev.com) (My personal blog webiste to read articles/post related to [Next.js](https://nextjsdev.com/next-js-vs-react-js-which-should-you-choose-in-2021/), Tailwind CSS , [React.js](https://nextjsdev.com/best-react-js-examples-project-that-you-can-build-as-a-beginner/) and [VsCode](https://nextjsdev.com/top-12-best-vs-code-extensions-you-need-in-2021/).