Article Components

Beautiful, responsive article and blog components built with TailwindCSS. Perfect for blogs, news sites, and content-heavy applications. Copy, paste, and customize for React, Vue, or HTML.

1. Simple Article Card

Clean and minimal article card with image, title, excerpt, and metadata.

Article thumbnail
Technology 5 min read

How to Build Modern Web Applications with TailwindCSS

Learn how to create beautiful, responsive layouts using TailwindCSS utility classes. This comprehensive guide covers everything from setup to advanced techniques.

T
Templateight
Dec 15, 2024 
<article class="bg-white border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,0.8)] rounded-lg overflow-hidden hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,0.8)] transition-all group">
  <div class="aspect-[16/10] bg-gray-200">
    <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=400&h=250&fit=crop" alt="Article thumbnail" class="w-full h-full object-cover">
  </div>
  <div class="p-6">
    <div class="flex items-center gap-2 mb-3">
      <span class="inline-block bg-violet text-white text-xs px-3 py-1 rounded-full font-bold">Technology</span>
      <span class="text-sm text-gray-500">5 min read</span>
    </div>
    <h3 class="text-lg font-bold mb-2 group-hover:text-violet transition-colors">How to Build Modern Web Applications with TailwindCSS</h3>
    <p class="text-gray-600 text-sm mb-4 leading-relaxed">Learn how to create beautiful, responsive layouts using TailwindCSS utility classes. This comprehensive guide covers everything from setup to advanced techniques.</p>
    <div class="flex items-center justify-between text-sm text-gray-500">
      <div class="flex items-center gap-2">
        <div class="w-6 h-6 bg-violet rounded-full flex items-center justify-center text-white text-xs font-bold">T</div>
        <span>Templateight</span>
      </div>
      <span>Dec 15, 2024</span>
    </div>
  </div>
</article>
<template>
  <article class="bg-white border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,0.8)] rounded-lg overflow-hidden hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,0.8)] transition-all group">
    <div class="aspect-[16/10] bg-gray-200">
      <img :src="article.image" :alt="article.title" class="w-full h-full object-cover">
    </div>
    <div class="p-6">
      <div class="flex items-center gap-2 mb-3">
        <span class="inline-block bg-violet text-white text-xs px-3 py-1 rounded-full font-bold">{{ article.category }}</span>
        <span class="text-sm text-gray-500">{{ article.readTime }} min read</span>
      </div>
      <h3 class="text-lg font-bold mb-2 group-hover:text-violet transition-colors">{{ article.title }}</h3>
      <p class="text-gray-600 text-sm mb-4 leading-relaxed">{{ article.excerpt }}</p>
      <div class="flex items-center justify-between text-sm text-gray-500">
        <div class="flex items-center gap-2">
          <div class="w-6 h-6 bg-violet rounded-full flex items-center justify-center text-white text-xs font-bold">
            {{ article.author.charAt(0).toUpperCase() }}
          </div>
          <span>{{ article.author }}</span>
        </div>
        <span>{{ formatDate(article.date) }}</span>
      </div>
    </div>
  </article>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps(['article'])

const formatDate = (date) => {
  return new Date(date).toLocaleDateString('en-US', { 
    year: 'numeric', 
    month: 'short', 
    day: 'numeric' 
  })
}
</script>
import React from 'react'

const ArticleCard = ({ article }) => {
  const formatDate = (date) => {
    return new Date(date).toLocaleDateString('en-US', { 
      year: 'numeric', 
      month: 'short', 
      day: 'numeric' 
    })
  }

  return (
    <article className="bg-white border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,0.8)] rounded-lg overflow-hidden hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,0.8)] transition-all group">
      <div className="aspect-[16/10] bg-gray-200">
        <img src={article.image} alt={article.title} className="w-full h-full object-cover" />
      </div>
      <div className="p-6">
        <div className="flex items-center gap-2 mb-3">
          <span className="inline-block bg-violet text-white text-xs px-3 py-1 rounded-full font-bold">
            {article.category}
          </span>
          <span className="text-sm text-gray-500">{article.readTime} min read</span>
        </div>
        <h3 className="text-lg font-bold mb-2 group-hover:text-violet transition-colors">
          {article.title}
        </h3>
        <p className="text-gray-600 text-sm mb-4 leading-relaxed">
          {article.excerpt}
        </p>
        <div className="flex items-center justify-between text-sm text-gray-500">
          <div className="flex items-center gap-2">
            <div className="w-6 h-6 bg-violet rounded-full flex items-center justify-center text-white text-xs font-bold">
              {article.author.charAt(0).toUpperCase()}
            </div>
            <span>{article.author}</span>
          </div>
          <span>{formatDate(article.date)}</span>
        </div>
      </div>
    </article>
  )
}

export default ArticleCard

2. Featured Article Banner

Large hero-style article banner with gradient overlay and prominent call-to-action.

Featured article
Featured 8 min read

The Future of Web Development: Trends to Watch in 2025

Discover the cutting-edge technologies and frameworks that will shape the web development landscape in the coming year.

Author

Alex Johnson

Senior Developer

<article class="relative bg-white border-2 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,0.8)] rounded-xl overflow-hidden group hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,0.8)] transition-all">
  <div class="relative aspect-[21/9]">
    <img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&h=400&fit=crop" alt="Featured article" class="w-full h-full object-cover">
    <div class="absolute inset-0 bg-gradient-to-r from-black/70 via-black/40 to-transparent"></div>
    <div class="absolute inset-0 p-8 flex flex-col justify-end">
      <div class="text-white max-w-2xl">
        <div class="flex items-center gap-3 mb-4">
          <span class="inline-block bg-[#ffde59] text-black text-sm px-4 py-1 rounded-full font-bold">Featured</span>
          <span class="text-sm opacity-90">8 min read</span>
        </div>
        <h2 class="text-3xl md:text-4xl font-bold mb-3 leading-tight">The Future of Web Development: Trends to Watch in 2025</h2>
        <p class="text-lg mb-6 opacity-90 leading-relaxed">Discover the cutting-edge technologies and frameworks that will shape the web development landscape in the coming year.</p>
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-3">
            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&h=40&fit=crop&crop=face" alt="Author" class="w-10 h-10 rounded-full border-2 border-white">
            <div>
              <p class="font-semibold">Alex Johnson</p>
              <p class="text-sm opacity-75">Senior Developer</p>
            </div>
          </div>
          <button class="bg-violet text-white px-6 py-3 rounded-lg font-bold border-2 border-white hover:bg-violet/90 transition-colors">
            Read Article
          </button>
        </div>
      </div>
    </div>
  </div>
</article>
<template>
  <article class="relative bg-white border-2 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,0.8)] rounded-xl overflow-hidden group hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,0.8)] transition-all">
    <div class="relative aspect-[21/9]">
      <img :src="featuredArticle.image" :alt="featuredArticle.title" class="w-full h-full object-cover">
      <div class="absolute inset-0 bg-gradient-to-r from-black/70 via-black/40 to-transparent"></div>
      <div class="absolute inset-0 p-8 flex flex-col justify-end">
        <div class="text-white max-w-2xl">
          <div class="flex items-center gap-3 mb-4">
            <span class="inline-block bg-[#ffde59] text-black text-sm px-4 py-1 rounded-full font-bold">{{ featuredArticle.badge }}</span>
            <span class="text-sm opacity-90">{{ featuredArticle.readTime }} min read</span>
          </div>
          <h2 class="text-3xl md:text-4xl font-bold mb-3 leading-tight">{{ featuredArticle.title }}</h2>
          <p class="text-lg mb-6 opacity-90 leading-relaxed">{{ featuredArticle.excerpt }}</p>
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
              <img :src="featuredArticle.author.avatar" :alt="featuredArticle.author.name" class="w-10 h-10 rounded-full border-2 border-white">
              <div>
                <p class="font-semibold">{{ featuredArticle.author.name }}</p>
                <p class="text-sm opacity-75">{{ featuredArticle.author.role }}</p>
              </div>
            </div>
            <button @click="readArticle" class="bg-violet text-white px-6 py-3 rounded-lg font-bold border-2 border-white hover:bg-violet/90 transition-colors">
              Read Article
            </button>
          </div>
        </div>
      </div>
    </div>
  </article>
</template>

<script setup>
const props = defineProps(['featuredArticle'])
const emit = defineEmits(['readArticle'])

const readArticle = () => {
  emit('readArticle', props.featuredArticle)
}
</script>
import React from 'react'

const FeaturedArticleBanner = ({ featuredArticle, onReadArticle }) => {
  const handleReadClick = () => {
    if (onReadArticle) {
      onReadArticle(featuredArticle)
    }
  }

  return (
    <article className="relative bg-white border-2 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,0.8)] rounded-xl overflow-hidden group hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,0.8)] transition-all">
      <div className="relative aspect-[21/9]">
        <img src={featuredArticle.image} alt={featuredArticle.title} className="w-full h-full object-cover" />
        <div className="absolute inset-0 bg-gradient-to-r from-black/70 via-black/40 to-transparent"></div>
        <div className="absolute inset-0 p-8 flex flex-col justify-end">
          <div className="text-white max-w-2xl">
            <div className="flex items-center gap-3 mb-4">
              <span className="inline-block bg-[#ffde59] text-black text-sm px-4 py-1 rounded-full font-bold">
                {featuredArticle.badge}
              </span>
              <span className="text-sm opacity-90">{featuredArticle.readTime} min read</span>
            </div>
            <h2 className="text-3xl md:text-4xl font-bold mb-3 leading-tight">
              {featuredArticle.title}
            </h2>
            <p className="text-lg mb-6 opacity-90 leading-relaxed">
              {featuredArticle.excerpt}
            </p>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <img src={featuredArticle.author.avatar} alt={featuredArticle.author.name} className="w-10 h-10 rounded-full border-2 border-white" />
                <div>
                  <p className="font-semibold">{featuredArticle.author.name}</p>
                  <p className="text-sm opacity-75">{featuredArticle.author.role}</p>
                </div>
              </div>
              <button onClick={handleReadClick} className="bg-violet text-white px-6 py-3 rounded-lg font-bold border-2 border-white hover:bg-violet/90 transition-colors">
                Read Article
              </button>
            </div>
          </div>
        </div>
      </div>
    </article>
  )
}

export default FeaturedArticleBanner

3. Minimal Horizontal Article Card

Clean minimal design with image on the left and content on the right, perfect for blog lists and news feeds.

Minimal article
Design • 6 min read

The Art of Minimalist Web Design: Less is More

Discover how minimalist design principles can improve user experience, reduce cognitive load, and create more effective websites.

M

Maria Chen

Design Lead

<article class="flex flex-col sm:flex-row bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all group">
  <div class="sm:w-1/3 w-full aspect-[16/10] sm:aspect-square bg-gray-100 flex-shrink-0">
    <img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=600&h=400&fit=crop" alt="Minimal article" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
  </div>
  <div class="p-6 sm:w-2/3 flex flex-col justify-between">
    <div>
      <div class="flex items-center gap-3 mb-3">
        <span class="text-xs font-semibold text-violet uppercase tracking-wide">Design</span>
        <span class="text-xs text-gray-400">•</span>
        <span class="text-xs text-gray-500">6 min read</span>
      </div>
      <h3 class="text-xl font-bold mb-3 leading-tight group-hover:text-violet transition-colors">The Art of Minimalist Web Design: Less is More</h3>
      <p class="text-gray-600 leading-relaxed mb-4">Discover how minimalist design principles can improve user experience, reduce cognitive load, and create more effective websites.</p>
    </div>
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-3">
        <div class="w-8 h-8 bg-gradient-to-r from-violet to-purple-600 rounded-full flex items-center justify-center">
          <span class="text-white text-sm font-bold">M</span>
        </div>
        <div>
          <p class="font-medium text-sm">Maria Chen</p>
          <p class="text-xs text-gray-500">Design Lead</p>
        </div>
      </div>
      <time class="text-sm text-gray-500">Dec 20, 2024</time>
    </div>
  </div>
</article>
<template>
  <article class="flex flex-col sm:flex-row bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all group">
    <div class="sm:w-1/3 w-full aspect-[16/10] sm:aspect-square bg-gray-100 flex-shrink-0">
      <img :src="article.image" :alt="article.title" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
    </div>
    <div class="p-6 sm:w-2/3 flex flex-col justify-between">
      <div>
        <div class="flex items-center gap-3 mb-3">
          <span class="text-xs font-semibold text-violet uppercase tracking-wide">{{ article.category }}</span>
          <span class="text-xs text-gray-400">•</span>
          <span class="text-xs text-gray-500">{{ article.readTime }} min read</span>
        </div>
        <h3 class="text-xl font-bold mb-3 leading-tight group-hover:text-violet transition-colors">{{ article.title }}</h3>
        <p class="text-gray-600 leading-relaxed mb-4">{{ article.excerpt }}</p>
      </div>
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
          <div class="w-8 h-8 bg-gradient-to-r from-violet to-purple-600 rounded-full flex items-center justify-center">
            <span class="text-white text-sm font-bold">{{ article.author.charAt(0).toUpperCase() }}</span>
          </div>
          <div>
            <p class="font-medium text-sm">{{ article.author.name }}</p>
            <p class="text-xs text-gray-500">{{ article.author.role }}</p>
          </div>
        </div>
        <time class="text-sm text-gray-500">{{ formatDate(article.date) }}</time>
      </div>
    </div>
  </article>
</template>

<script setup>
const props = defineProps(['article'])

const formatDate = (date) => {
  return new Date(date).toLocaleDateString('en-US', { 
    year: 'numeric', 
    month: 'short', 
    day: 'numeric' 
  })
}
</script>
import React from 'react'

const MinimalHorizontalCard = ({ article }) => {
  const formatDate = (date) => {
    return new Date(date).toLocaleDateString('en-US', { 
      year: 'numeric', 
      month: 'short', 
      day: 'numeric' 
    })
  }

  return (
    <article className="flex flex-col sm:flex-row bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all group">
      <div className="sm:w-1/3 w-full aspect-[16/10] sm:aspect-square bg-gray-100 flex-shrink-0">
        <img src={article.image} alt={article.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
      </div>
      <div className="p-6 sm:w-2/3 flex flex-col justify-between">
        <div>
          <div className="flex items-center gap-3 mb-3">
            <span className="text-xs font-semibold text-violet uppercase tracking-wide">{article.category}</span>
            <span className="text-xs text-gray-400">•</span>
            <span className="text-xs text-gray-500">{article.readTime} min read</span>
          </div>
          <h3 className="text-xl font-bold mb-3 leading-tight group-hover:text-violet transition-colors">{article.title}</h3>
          <p className="text-gray-600 leading-relaxed mb-4">{article.excerpt}</p>
        </div>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-8 h-8 bg-gradient-to-r from-violet to-purple-600 rounded-full flex items-center justify-center">
              <span className="text-white text-sm font-bold">{article.author.name.charAt(0).toUpperCase()}</span>
            </div>
            <div>
              <p className="font-medium text-sm">{article.author.name}</p>
              <p className="text-xs text-gray-500">{article.author.role}</p>
            </div>
          </div>
          <time className="text-sm text-gray-500">{formatDate(article.date)}</time>
        </div>
      </div>
    </article>
  )
}

export default MinimalHorizontalCard

4. Neobrutalist Article List Item

Bold neobrutalist design with thick borders, shadows, and vibrant colors - perfect for modern blogs and creative portfolios.

Neobrutalist article
Tech
12 min read

Building the Future: Web Development Trends That Actually Matter

Cut through the hype and discover the web development trends that will genuinely impact your career and projects in the next 5 years.

D

David Kim

Full Stack Developer

<article class="flex flex-col sm:flex-row bg-white border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all duration-200 group">
  <div class="sm:w-2/5 w-full aspect-[16/10] bg-[#ffde59] border-b-4 sm:border-b-0 sm:border-r-4 border-black flex-shrink-0 overflow-hidden">
    <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=600&h=400&fit=crop" alt="Neobrutalist article" class="w-full h-full object-cover">
  </div>
  <div class="p-8 sm:w-3/5 flex flex-col justify-between">
    <div>
      <div class="flex items-center gap-3 mb-4">
        <span class="bg-[#ff5c5c] text-white text-xs font-black px-3 py-2 border-2 border-black uppercase tracking-wider">Tech</span>
        <div class="flex items-center gap-2">
          <div class="w-2 h-2 bg-black rounded-full"></div>
          <span class="text-sm font-bold">12 min read</span>
        </div>
      </div>
      <h3 class="text-2xl font-black mb-4 leading-tight group-hover:text-violet transition-colors">Building the Future: Web Development Trends That Actually Matter</h3>
      <p class="text-gray-700 font-medium leading-relaxed mb-6">Cut through the hype and discover the web development trends that will genuinely impact your career and projects in the next 5 years.</p>
    </div>
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-4">
        <div class="w-12 h-12 bg-gradient-to-br from-violet to-[#ff5c5c] border-3 border-black flex items-center justify-center transform rotate-3">
          <span class="text-white text-lg font-black">D</span>
        </div>
        <div>
          <p class="font-black text-base">David Kim</p>
          <p class="text-sm font-bold text-gray-600">Full Stack Developer</p>
        </div>
      </div>
      <div class="text-right">
        <time class="block text-sm font-bold text-gray-600">Jan 15, 2025</time>
        <div class="flex items-center gap-1 mt-1">
          <div class="w-1 h-1 bg-violet rounded-full"></div>
          <div class="w-1 h-1 bg-[#ffde59] rounded-full"></div>
          <div class="w-1 h-1 bg-[#ff5c5c] rounded-full"></div>
        </div>
      </div>
    </div>
  </div>
</article>
<template>
  <article class="flex flex-col sm:flex-row bg-white border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all duration-200 group">
    <div class="sm:w-2/5 w-full aspect-[16/10] border-b-4 sm:border-b-0 sm:border-r-4 border-black flex-shrink-0 overflow-hidden" :class="article.bgColor">
      <img :src="article.image" :alt="article.title" class="w-full h-full object-cover">
    </div>
    <div class="p-8 sm:w-3/5 flex flex-col justify-between">
      <div>
        <div class="flex items-center gap-3 mb-4">
          <span :class="article.categoryColor" class="text-white text-xs font-black px-3 py-2 border-2 border-black uppercase tracking-wider">{{ article.category }}</span>
          <div class="flex items-center gap-2">
            <div class="w-2 h-2 bg-black rounded-full"></div>
            <span class="text-sm font-bold">{{ article.readTime }} min read</span>
          </div>
        </div>
        <h3 class="text-2xl font-black mb-4 leading-tight group-hover:text-violet transition-colors">{{ article.title }}</h3>
        <p class="text-gray-700 font-medium leading-relaxed mb-6">{{ article.excerpt }}</p>
      </div>
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-4">
          <div :class="article.authorColor" class="w-12 h-12 border-3 border-black flex items-center justify-center transform rotate-3">
            <span class="text-white text-lg font-black">{{ article.author.name.charAt(0).toUpperCase() }}</span>
          </div>
          <div>
            <p class="font-black text-base">{{ article.author.name }}</p>
            <p class="text-sm font-bold text-gray-600">{{ article.author.role }}</p>
          </div>
        </div>
        <div class="text-right">
          <time class="block text-sm font-bold text-gray-600">{{ formatDate(article.date) }}</time>
          <div class="flex items-center gap-1 mt-1">
            <div class="w-1 h-1 bg-violet rounded-full"></div>
            <div class="w-1 h-1 bg-[#ffde59] rounded-full"></div>
            <div class="w-1 h-1 bg-[#ff5c5c] rounded-full"></div>
          </div>
        </div>
      </div>
    </div>
  </article>
</template>

<script setup>
const props = defineProps(['article'])

const formatDate = (date) => {
  return new Date(date).toLocaleDateString('en-US', { 
    year: 'numeric', 
    month: 'short', 
    day: 'numeric' 
  })
}
</script>
import React from 'react'

const NeobrutalistArticleCard = ({ article }) => {
  const formatDate = (date) => {
    return new Date(date).toLocaleDateString('en-US', { 
      year: 'numeric', 
      month: 'short', 
      day: 'numeric' 
    })
  }

  return (
    <article className="flex flex-col sm:flex-row bg-white border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all duration-200 group">
      <div className={`sm:w-2/5 w-full aspect-[16/10] border-b-4 sm:border-b-0 sm:border-r-4 border-black flex-shrink-0 overflow-hidden ${article.bgColor}`}>
        <img src={article.image} alt={article.title} className="w-full h-full object-cover" />
      </div>
      <div className="p-8 sm:w-3/5 flex flex-col justify-between">
        <div>
          <div className="flex items-center gap-3 mb-4">
            <span className={`${article.categoryColor} text-white text-xs font-black px-3 py-2 border-2 border-black uppercase tracking-wider`}>
              {article.category}
            </span>
            <div className="flex items-center gap-2">
              <div className="w-2 h-2 bg-black rounded-full"></div>
              <span className="text-sm font-bold">{article.readTime} min read</span>
            </div>
          </div>
          <h3 className="text-2xl font-black mb-4 leading-tight group-hover:text-violet transition-colors">{article.title}</h3>
          <p className="text-gray-700 font-medium leading-relaxed mb-6">{article.excerpt}</p>
        </div>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <div className={`${article.authorColor} w-12 h-12 border-3 border-black flex items-center justify-center transform rotate-3`}>
              <span className="text-white text-lg font-black">{article.author.name.charAt(0).toUpperCase()}</span>
            </div>
            <div>
              <p className="font-black text-base">{article.author.name}</p>
              <p className="text-sm font-bold text-gray-600">{article.author.role}</p>
            </div>
          </div>
          <div className="text-right">
            <time className="block text-sm font-bold text-gray-600">{formatDate(article.date)}</time>
            <div className="flex items-center gap-1 mt-1">
              <div className="w-1 h-1 bg-violet rounded-full"></div>
              <div className="w-1 h-1 bg-[#ffde59] rounded-full"></div>
              <div className="w-1 h-1 bg-[#ff5c5c] rounded-full"></div>
            </div>
          </div>
        </div>
      </div>
    </article>
  )
}

export default NeobrutalistArticleCard

🚀 How to Use These Components

Requirements

  • TailwindCSS v4.0+ installed (Install Guide)
  • Images from Unsplash or your own assets
  • Responsive design utilities

Pro Tip: These article components work great for blogs, news sites, documentation, and content marketing. Customize images, colors, and typography to match your brand.

We use cookies to improve your experience and analytics. You can accept all cookies or reject non-essential ones.

Learn More