Home
pablitodgb
component

component

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

Card

Author pablitodgb

735

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

Author:
Mike Varen

1 year ago

4.1k
Responsive card grid
responsive card grid for articles

Author:
Mr Robot

2 years ago

15.4k
Update Profile
Update profile page with basic informations

Author:
Sedat Kumcu

1 year ago

2.7k
Signup page- Paper / Hand-drawn UI

Author:
Akram Khan

4 months ago

522
Pokemon!
Cool Pokemon card!

Author:
Crimson

10 months ago

1.2k
Profile card
tailwind Profile Card

Author:
Md. Tofayel islam

1 year ago

2.6k
beautifull project Item

Author:
Akram Khan

1 year ago

2.1k
Article Card

Author:
Anonymous

1 year ago

2.5k
Product Card for eCommerce
Here is a Product Card with discount badge, price with discount and price normally. On other hand, buttons for up or down quantity and add to cart button. This is create for Grid Columns, wich can 4 or 5 depend for desktop

Author:
Andrés Abarzúa

4 months ago

810
Responsive Card

Author:
ariaw

8 months ago

625
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

Author:
MD Mostafa Niloy

4 days ago

19
Beautiful card design with image

Author:
Brandon D

3 years ago

13.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components