component

This tailwind example is contributed by pablitodgb, on 21-Jun-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Card

Author pablitodgb

Tailwind v3.4 1.7k 6

Fork Fullscreen

<div class="h-screen w-screen text-slate-600 bg-slate-100 dark:text-slate-100 dark:bg-slate-600 flex justify-center items-center">
  <div class="min-h-xs h-full max-h-[20rem] min-w-xs w-full max-w-sm rounded-xl bg-local relative bg-cover border border-1 border-slate-100 shadow-xl shadow-slate-500/50 dark:shadow-cyan-500/50 dark:border-cyan-300 -translate-6 bg-[url(https://images.unsplash.com/photo-1619995745882-f4128ac82ad6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxM3x8aW1hZ2V8ZW58MHwwfHx8MTc1MDUxOTY4MHww&ixlib=rb-4.1.0&q=80&w=1080)]">
    <div class="absolute bottom-7 left-2">
      <p class="text-2xl font-bold text-slate-200 dark:text-cyan-500 hover:underline decoration-wavy dark:decoration-cyan-400 truncate">Forest🕸️</p>
      <p class="text-xl font-semibold text-slate-300 dark:text-cyan-500">Spider</p>
    </div>
  </div>
</div>

<div
    class="w-40 h-20 flex justify-center items-center text-sky-200 border-2 rounded-lg border-sky-200 shadow-[0_0_2px_#fff,inset_0_0_2px_#fff,0_0_5px_#08f,0_0_15px_#08f,0_0_30px_#08f]"
>
    Neon container
</div>

Related Examples

Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Mike Varen

2 years ago

5.2k
Minimal Card
This is awesome looking card

Shaik Sameer Basha

2 years ago

3.4k
Feature Card
Elevated card

Prajwal Hallale

4 years ago

10.8k
E-Learning Course Card with Badge and Level Indicator
An HTML and Tailwind CSS component mockup for displaying course information. Features include a placeholder image area with an overlaid certificate badge, a distinct level indicator banner below the image, category text, a course title, key details (like duration and learner count placeholders), and primary/secondary action buttons. Designed for e-learning platforms or course listings.

Hamza Atig

1 year ago

1.6k
omerlinkStream
omerlinkStream

Omer fils ELENGA

9 months ago

1.3k
Info Card
Information card with image

Brandon D

4 years ago

10.4k
Shopping Cart -Card

ABDO-SY

1 year ago

2.6k
Simple Profile Card.
Profile page with basic informations

Sedat Kumcu

1 year ago

3.6k
Card template

Raul antonio de la cruz hernandez

9 months ago

541
Product Card

Maxim

1 year ago

2.1k
Image card with overlay text overlay

Santos78

3 years ago

33.1k
Brand Grid with Hover Effect

ariaw

1 year ago

2k