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.
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 components 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 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.
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.
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 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.
<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 NextjsDev.com (My personal blog website to read articles/posts related to Next.js, Tailwind CSS , React.js .
First Published here