Dark Blog Cards

This tailwind example is contributed by JUGENDRA GANGWAR, on 14-Oct-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Article Card, Blog page card, Article card

Blog Card

Author JUGENDRA GANGWAR

Tailwind v3.4 11 1

Fork Fullscreen

<div class="mb-10 flex items-center justify-between border-b border-white/10 pb-6">
     <div>
       <div class="inline-flex items-center gap-2 text-xs font-mono tracking-wider text-cyan-400">
         <span class="h-2 w-2 rounded-full bg-cyan-400 animate-ping"></span>
         SYS.RADAR_ACTIVATED
       </div>
       <h2 class="mt-2 text-2xl font-bold tracking-tight text-white sm:text-3xl">Dark Tech Radar</h2>
     </div>
     <span class="hidden sm:inline-block font-mono text-xs text-slate-500">CYBERPUNK / GLASS</span>
   </div>

<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
     <article class="rise group relative rounded-2xl border border-white/10 bg-[#0F162B]/80 p-3.5 backdrop-blur-md transition-all duration-300 hover:-translate-y-1.5 hover:border-cyan-400/50 hover:shadow-[0_20px_40px_-15px_rgba(34,211,238,0.25)]" style="--d:0ms">
       <div class="relative aspect-video overflow-hidden rounded-xl">
         <img src="https://picsum.photos/seed/blog81/800/450" alt="" loading="lazy" class="h-full w-full object-cover opacity-80 transition duration-500 group-hover:scale-105 group-hover:opacity-100">
         <div class="absolute inset-0 bg-gradient-to-t from-[#0F162B] via-transparent to-transparent"></div>
         <span class="mono absolute top-2.5 left-2.5 rounded bg-black/60 px-2 py-0.5 text-[10px] uppercase tracking-wider text-cyan-400 border border-cyan-400/30 backdrop-blur">Photography</span>
       </div>
       <div class="p-3 pt-4">
         <h3 class="text-base font-semibold leading-snug text-white transition group-hover:text-cyan-300">
           Shooting golden hour with just one lens
         </h3>
         <p class="mt-2 line-clamp-2 text-xs leading-relaxed text-slate-400">
           Why limiting your kit leads to stronger frames and a lighter bag.
         </p>
         <div class="mono mt-5 flex items-center justify-between border-t border-white/5 pt-3 text-[11px] text-slate-400">
           <span>22 SEP</span>
           <span class="flex items-center gap-1.5 text-cyan-300 font-medium">
             <span class="h-1.5 w-1.5 rounded-full bg-cyan-400 animate-pulse"></span>
             5 MIN READ
           </span>
         </div>
       </div>
     </article>

<article class="rise group relative rounded-2xl border border-white/10 bg-[#0F162B]/80 p-3.5 backdrop-blur-md transition-all duration-300 hover:-translate-y-1.5 hover:border-cyan-400/50 hover:shadow-[0_20px_40px_-15px_rgba(34,211,238,0.25)]" style="--d:90ms">
       <div class="relative aspect-video overflow-hidden rounded-xl">
         <img src="https://picsum.photos/seed/blog96/800/450" alt="" loading="lazy" class="h-full w-full object-cover opacity-80 transition duration-500 group-hover:scale-105 group-hover:opacity-100">
         <div class="absolute inset-0 bg-gradient-to-t from-[#0F162B] via-transparent to-transparent"></div>
         <span class="mono absolute top-2.5 left-2.5 rounded bg-black/60 px-2 py-0.5 text-[10px] uppercase tracking-wider text-cyan-400 border border-cyan-400/30 backdrop-blur">Finance</span>
       </div>
       <div class="p-3 pt-4">
         <h3 class="text-base font-semibold leading-snug text-white transition group-hover:text-cyan-300">
           Index funds, explained without the jargon
         </h3>
         <p class="mt-2 line-clamp-2 text-xs leading-relaxed text-slate-400">
           A plain-language walkthrough of what you own and why compounding wins.
         </p>
         <div class="mono mt-5 flex items-center justify-between border-t border-white/5 pt-3 text-[11px] text-slate-400">
           <span>18 SEP</span>
           <span class="flex items-center gap-1.5 text-cyan-300 font-medium">
             <span class="h-1.5 w-1.5 rounded-full bg-cyan-400 animate-pulse"></span>
             9 MIN READ
           </span>
         </div>
       </div>
     </article>

<article class="rise group relative rounded-2xl border border-white/10 bg-[#0F162B]/80 p-3.5 backdrop-blur-md transition-all duration-300 hover:-translate-y-1.5 hover:border-cyan-400/50 hover:shadow-[0_20px_40px_-15px_rgba(34,211,238,0.25)]" style="--d:180ms">
       <div class="relative aspect-video overflow-hidden rounded-xl">
         <img src="https://picsum.photos/seed/blog109/800/450" alt="" loading="lazy" class="h-full w-full object-cover opacity-80 transition duration-500 group-hover:scale-105 group-hover:opacity-100">
         <div class="absolute inset-0 bg-gradient-to-t from-[#0F162B] via-transparent to-transparent"></div>
         <span class="mono absolute top-2.5 left-2.5 rounded bg-black/60 px-2 py-0.5 text-[10px] uppercase tracking-wider text-cyan-400 border border-cyan-400/30 backdrop-blur">Wellness</span>
       </div>
       <div class="p-3 pt-4">
         <h3 class="text-base font-semibold leading-snug text-white transition group-hover:text-cyan-300">
           Ten-minute routines that actually stick
         </h3>
         <p class="mt-2 line-clamp-2 text-xs leading-relaxed text-slate-400">
           Tiny, repeatable habits for sleep, movement and mental clarity.
         </p>
         <div class="mono mt-5 flex items-center justify-between border-t border-white/5 pt-3 text-[11px] text-slate-400">
           <span>14 SEP</span>
           <span class="flex items-center gap-1.5 text-cyan-300 font-medium">
             <span class="h-1.5 w-1.5 rounded-full bg-cyan-400 animate-pulse"></span>
             4 MIN READ
           </span>
         </div>
       </div>
     </article>

<article class="rise group relative rounded-2xl border border-white/10 bg-[#0F162B]/80 p-3.5 backdrop-blur-md transition-all duration-300 hover:-translate-y-1.5 hover:border-cyan-400/50 hover:shadow-[0_20px_40px_-15px_rgba(34,211,238,0.25)]" style="--d:270ms">
       <div class="relative aspect-video overflow-hidden rounded-xl">
         <img src="https://picsum.photos/seed/blog122/800/450" alt="" loading="lazy" class="h-full w-full object-cover opacity-80 transition duration-500 group-hover:scale-105 group-hover:opacity-100">
         <div class="absolute inset-0 bg-gradient-to-t from-[#0F162B] via-transparent to-transparent"></div>
         <span class="mono absolute top-2.5 left-2.5 rounded bg-black/60 px-2 py-0.5 text-[10px] uppercase tracking-wider text-cyan-400 border border-cyan-400/30 backdrop-blur">Culture</span>
       </div>
       <div class="p-3 pt-4">
         <h3 class="text-base font-semibold leading-snug text-white transition group-hover:text-cyan-300">
           How indie magazines reinvented print
         </h3>
         <p class="mt-2 line-clamp-2 text-xs leading-relaxed text-slate-400">
           Independent editors betting on paper, craft and tactile community.
         </p>
         <div class="mono mt-5 flex items-center justify-between border-t border-white/5 pt-3 text-[11px] text-slate-400">
           <span>10 SEP</span>
           <span class="flex items-center gap-1.5 text-cyan-300 font-medium">
             <span class="h-1.5 w-1.5 rounded-full bg-cyan-400 animate-pulse"></span>
             7 MIN READ
           </span>
         </div>
       </div>
     </article>
   </div>
 </section>

Related Examples

Blog Cards

JUGENDRA GANGWAR

1 day ago

7
profile3

pablitodgb

1 year ago

1k
Card
amazing card

Cristian

1 year ago

2.5k
profile card
card

Tofayel Islam

9 months ago

223
Latest Blog Card Components
Stay ahead of the curve with fresh content on code, design, startups, and everything in between.

Alif Bima Pradana

8 months ago

454
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Abdul Baset Bappy

1 year ago

2.3k
Short and simple card grid
Best suited for news websites

Mr Robot

3 years ago

12.2k
carde Iptplus
Iptplus carde

Omer fils ELENGA

10 months ago

429
Blog Author Card
Blog Author Card

Tanvir Hasan Bappy (Tanvir)

9 months ago

664
Responsive Card Section With Hover Effect
added more cards with ui friendly

SAI BENDE

1 year ago

984
Horizontal Blog Cards

JUGENDRA GANGWAR

1 day ago

7
Targeta
Targeta

Raul antonio de la cruz hernandez

10 months ago

864