\
\
\
This blog post is a small tutorial in which I show you how you can create a gradient border blog card 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 using 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 **components** folder in the root directory and inside that folder create a **BlogPostCard.js** file and write the following code shown below.

\
 ![Folder Structure](https://cdn.hackernoon.com/images/ckwezmh-3-o-000-h-0-cs-6-fhkd-444-k.jpg)

```javascript
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 it's time to add tailwind CSS classes. So, here I am pasting all the CSS code at once, please take some time to make sense of it.

\
```javascript
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, add the **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 hard work, you should see an output like this:

\
 ![Ouput Result](https://cdn.hackernoon.com/images/ckwezmh-3-r-000-i-0-cs-682-j-5-eu-73.jpg)

The trick for creating a gradient border is that you create two **DIV's**, one nested in another and they 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://cdn.hackernoon.com/images/ckwezmh-3-s-000-j-0-cs-6-hjdi-7-mlq.jpg)

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

\
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 website to read articles/posts 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) .

\
*First Published [here](https://dev.to/raivikas/how-to-create-a-gradient-border-blogpostcard-using-tailwind-css-and-nextjs-57fa)*

Keep

2022 - HackerNoon Contributor of the Year - Authentication

2022 - HackerNoon Contributor of the Year - Css

2022 - HackerNoon Contributor of the Year - Productivity

Portfolio

Visit Nextjs Dev

Book a Call

Nominated for 2022 - HackerNoon Contributor of the Year - Css

Nominated for 2022 - HackerNoon Contributor of the Year - Productivity

Nominated for 2022 - HackerNoon Contributor of the Year - Authentication

Too Long; Didn't Read

Web Development & Ecommerce Writing Contest

Create a Gradient Border With TailwindCSS and React

Create a Gradient Border With TailwindCSS and React

Too Long; Didn't Read

Company Mentioned

@raivikas

RELATED STORIES