4 Tailwind Blog Card Components for Your React and Next.js App

Marketing evolves over time. If your business is online, you need some form of marketing.

Blogging is considered a key part of this strategy.

Despite recent updates from Google and advancements in large language model software, blogging remains one of the best sources of marketing.

Today, I will share a responsive blog card component UI with 4 variants built with React and Tailwind CSS. To use these UI components in your project, all you need to do is copy and paste.

Blog Card with Cover

This is what our blog card with cover looks like:

Blog Card with Cover Component Code

If you are only interested in the blog card component, you can use the code below.

Preview

React Tailwind Newsletter Component

Learn how to build a responsive newsletter component using React and Tailwind CSS.

14th July 2024 | 5 min read

Horizontal Blog Card

To make our landing/home page look elegant, I built another variant of blog component that is a bit different than other designs.

In this Blog Card component, we show images horizontally with card data. We are also scaling the blog card image on hover.

Horizontal Blog Card UI

This is the desktop view of Horizontal Blog Card.

Horizontal Blog Card Code

Types and props are exactly same as previous blog card component, only the UI is different.

Preview

React Tailwind Newsletter Component

Learn how to build a responsive newsletter component using React and Tailwind CSS.

14th July 2024 | 5 min read

• To format the date in the desired format, I have built a utility function formatDate. That convert '2024-07-14' into 14th July 2024. Use it if you need it.

Blog Card Component For Tech or Coding Blog

The Tech Blog Card Component is built for tech or coding blogs.

I keep the design minimal. It highlights following key details:

1. Title
2. Category
3. Description
4. Tags
5. Metadata (date, reading time)

It's perfect for modern tech blogs.

Tech Blog Card UI

Tech Blog Card Component Code

Rendering Category Icons Conditionally

The Tech Blog Card Component renders category icons dynamically based on the article's category.

• The categories object defines a mapping between the category and its associated icon.
• When rendering an article card, the component checks the category of the article and displays the corresponding icon using {categories[category].icon}.
• For example, if the article's category is React, the Atom icon is displayed; for JavaScript, the Code2 icon is displayed; and for CSS, the BookCopy icon is used.

Clean and Minimal Blog Card Component

This clean blog card design is perfect for displaying blog posts in a responsive grid. The component is lightweight, customizable, and follows modern UI practices using Tailwind CSS.

Clean Blog Card UI

Clean Blog Card Component Code

The BlogCard component takes a post object as a prop and dynamically displays the title, image, category, and published date. This structure allows easy reuse across your project.

Preview

React

14th July 2024

React Tailwind Newsletter Component

Notes:

• posts Data: Ensure your blog data follows the structure outlined above.
• formatDate Utility: This utility function formats the publishDate to a readable format.
• Customizable UI: Modify the Tailwind classes for a personalized design.

Feel free to find me on LinkedIn if you have any component requests or suggestions.