How to create a Gradient border BlogPostCard using Tailwind CSS and Next.js.

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.

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.

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

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 in the Home() function.

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:

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.

<div>
  <div>

  </div>
<div>

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

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

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 (My personal blog webiste to read articles/post related to Next.js, Tailwind CSS , React.js and VsCode.

40

دسته بندی ها:

React

برچسب ها:

ReactTailwindcssTutorialNextjs