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

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

Profile card
tailwind Profile Card

Author:
Md. Tofayel islam

1 year ago

2.8k
Shoping Cart Popup

Author:
ABDO-SY

11 months ago

1.3k
split bg

Author:
Anonymous

9 months ago

527
Twitter tweet clone
Replica of twitter tweet card

Author:
Sophia Baker

3 years ago

10k
Simple responsive cards

Author:
Shakti

2 years ago

10.1k
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

1.3k
Pricing card
Reveal details on hover

Author:
Anonymous

1 year ago

4.5k
Floating capsule

Author:
Amazing Engineer

9 months ago

740
Profile Card
User profile card

Author:
Ajay Thakur

4 months ago

180
Clickable and Responsive Card Grid
It is designed to showcase and link to various topics or content categories.

Author:
R Thapa

2 years ago

11.2k
Image card

Author:
Laurits

3 years ago

17.5k
Frontend Template Open Source Code Website
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Rathanak Phan

8 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components