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.6k 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

ApexCodeStudios.com Social Media Post Card
Get Access to 216+ Free Premium Tailwind CSS UI Components at apexcodestudios.com. This component excels with its clean typography using Inter font, smooth hover effects, responsive design, and seamless light/dark mode switching.

Apex Code Studios

2 months ago

323
Card for user contact

achelton pambo

2 years ago

3.2k
Clean Image Grid Gallery
A clean and balanced image gallery arranged in equal-sized columns for a simple, organized presentation.

JUGENDRA GANGWAR

2 months ago

139
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

Andrés Abarzúa

1 year ago

1.3k
Card with image
Blog post card

Mr Robot

3 years ago

11.1k
Card Component
This component is a simple card (without image) component with hover effect & Dark mode Supported & full responsive

Shariar Hasan

2 years ago

4.3k
Tailwind AoPS Demo - Isabel
Starter code for an interactive Tailwind Demo

Isabel McGuigan

2 years ago

3.3k
Thankyou Card

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

6.5k
Card Item Financieros
Item Financiero

Ameth Galarcio

2 years ago

2.7k
sticky headings
sticky headings

Anonymous

2 years ago

6.6k
Otp-code template
This is an OTP code template that contains the one-time password, which can be sent to the user's email either when they are signing up for the first time or for multi-factor authentication (MFA) during the login process.

anandu ap

1 year ago

3.7k
test deepseek ticket
test deepseek ticket

Omer fils ELENGA

12 hours ago

6