Tailwind Css blogs Card 🤡

Tailwind Blogs Card

This is just a Blog Card Commponent using tailwind css it's awesome.

How it look’s Blog Card 👇

when we hover on one blogs card or more blogs card its taken shadow in background looks like ☝️

Install Tailwind CSS 👇

Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Getting Started

First, run the development server 👇

npm run dev
# or
yarn dev

Create Blog Card component

Create card component in Next Js or React Js Or Jsx App and paste this below code and import the card component in main file and run the local server and its work.

import Link from 'next/link'
import React from 'react'

function BlogsCard() {
  const DemoData = [
    {
      id: 1,
      slug: 'how-to-reslove-react-hydration-error-in-simple-way',
      title: 'Reslove react hydration error in simple way 🚀',
      subtitle:
        'Fix Next.js “Text content does not match server-rendered HTML” React hydration error in Next Js',
      date: 'Thus 15th September',
    },
    // ...more
  ]

  return (
    <div className="bg-white dark:bg-zinc-800">
      <div className="py-8 px-1">
        <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:m-0 lg:grid-cols-3">
          {DemoData.map((post, index) => {
            return (
              <div
                className="rounded shadow hover:shadow-[0_3px_30px_-7px_rgba(0,0,0,0.3)] dark:bg-zinc-700"
                key={index}
              >
                <div className="rounded bg-gray-800"></div>
                <div className="h-[150px] p-3">
                  <h2 className="text-xl font-bold">
                    {post.title.length > 46
                      ? post.title.slice(0, 50) + ' ...'
                      : post.title}
                  </h2>
                  <p className="pt-2 text-sm text-gray-600 dark:text-gray-200">
                    {post.subtitle.length > 130
                      ? post.subtitle.slice(0, 130) + ' ...'
                      : post.subtitle}
                  </p>
                </div>
                <div className="flex items-center justify-between p-3 text-blue-400 dark:text-yellow-300">
                  <Link href={`/blogs/${[post.slug]}`} passHref>
                    <span>😍 Read article</span>
                  </Link>
                  <a
                    href="#"
                    className="text-[12px] text-black dark:text-white"
                  >
                    {post.date}
                  </a>
                </div>
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}

export default BlogsCard

TypeScript

import React from 'react'

export function Card() {
  const DemoData: {
    id: number,
    slug: string,
    title: string,
    subtitle: string,
    date: string,
  } = [
    {
      id: 1,
      slug: 'how-to-reslove-react-hydration-error-in-simple-way',
      title: 'Reslove react hydration error in simple way 🚀',
      subtitle:
        'Fix Next.js “Text content does not match server-rendered HTML” React hydration error in Next Js',
      date: 'Thus 15th September',
    },
  ]

  return <div></div>
}