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

407

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

Pricing card
Reveal details on hover

Author:
Anonymous

1 year ago

3.8k
Responsive Cards

Author:
Anonymous

1 year ago

1.4k
Card
amazing card

Author:
Cristian

10 months ago

1.5k
Holiday package card
Responsive card

Author:
Aman kumar

1 year ago

6k
Card with image
Blog post card

Author:
Mr Robot

2 years ago

10.2k
Profile Card
Simple and Attractive Profile card in tailwind css

Author:
KULDEEP

2 months ago

175
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

2 weeks ago

92
Monkey card
First tailwind example

Author:
muhittin budak

5 months ago

407
Food App Web design

Author:
Aitrik Saha

6 months ago

1.3k
Cards Seaction - Services block

Author:
ABDO-SY

5 months ago

975
Tailwind Flex Component: Responsive Testimonial Section UI
A clean, modern, and fully responsive Testimonial Section built using Tailwind CSS and Flexbox. Ideal for portfolios, agency websites, SaaS landing pages, or any modern UI project. This reusable component includes user images, job titles, and quotes—perfect for showcasing feedback and adding trust to your UI.

Author:
Muhammad Umair Arshad

3 months ago

457
zoom in effect card
A responsive card featuring an eye-catching scenic image, designed with Tailwind CSS. This component includes hover effects for the image.

Author:
Anum Shahana

11 months ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components