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 as a framework because using this one command you can initialize a next-app with . Next.js 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 directory. Pages 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 folder in the root directory and inside that folder create a file and write the following code shown below. components BlogPostCard.js 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 . 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. /image.jpg 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 in the file  and the component in the . import the BlogPostCard from components/BlogPostCard.js index.js <BlogPostCard /> 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 hard work, you should see an output like this: The trick for creating a gradient border is that you create two , one nested in another and they should be relative to each other, then you give the two same height and width, such that the two DIV's should be stacked on each other. DIV's DIV's <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. 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 (My personal blog website to read articles/posts related to , Tailwind CSS , . NextjsDev.com Next.js React.js First Published here

Keep

7 Must Use Tools For Newbie Web Developers 

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

Create a Gradient Border With TailwindCSS and React

Create a Gradient Border With TailwindCSS and React

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

12 Best Vscode Extensions to Boost Your Productivity in 2022

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

12 Best Vscode Extensions to Boost Your Productivity in 2022

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps