Expandable Card

An expandable card using tailwind + alpine to show additional information when it is open

This tailwind example is contributed by farid, on 11-Oct-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Author box, User information,Product Showcase, Product card,Transitions

Card Profile Product Animation

Author farid

Tailwind v3.4 827 2

Fork Fullscreen

<div class="flex h-full">
      <div class="flex-shrink-0 w-[280px] flex flex-col items-center justify-center p-6 text-white">
        <div class="w-32 h-32 rounded-full overflow-hidden mb-6 border-4 border-white/20">
          <img src="https://placecats.com/250/250" alt="Cart in place" class="w-full h-full object-cover">
        </div>
        <h2 class="text-2xl font-bold text-center mb-2">Cat in place</h2>
        <p class="text-lg text-teal-100 text-center">Showing its wellbeing</p>
      </div>

<div
        class="flex-1 bg-white/95 dark:bg-gray-700 backdrop-blur-sm transition-all duration-500 ease-in-out overflow-hidden">
        <div class="transition-opacity p-6 h-full flex flex-col justify-center"
          :class="isExpanded ? 'opacity-100 translate-x-0 delay-300' : 'opacity-0 translate-x-full'">
          <h3 class="text-xl font-bold text-gray-800 dark:text-gray-100 mb-4"> Aditional Information</h3>

<div class="space-y-4">
            <div>
              <h4 class="font-semibold text-gray-700 dark:text-gray-200 mb-1">Position at work</h4>
              <p class="text-gray-600 dark:text-gray-300">Personal Coach</p>
            </div>

<div>
              <h4 class="font-semibold text-gray-700 dark:text-gray-200 mb-1">Contact</h4>
              <p class="text-gray-600 dark:text-gray-300">your.cat@company.com</p>
              <p class="text-gray-600  dark:text-gray-300">+1 (555) 123-4567</p>
            </div>

<div>
              <h4 class="font-semibold text-gray-700 dark:text-gray-200 mb-1">Experience</h4>
              <p class="text-gray-600 dark:text-gray-300">Top selling author</p>
            </div>

<div>
              <h4 class="font-semibold text-gray-700 dark:text-gray-200 mb-1">Specialties</h4>
              <div class="flex flex-wrap gap-2 mt-2">
                <span class="px-3 py-1 bg-teal-100 dark:bg-teal-600 text-teal-700 dark:text-gray-200 rounded-full text-sm">Wellbeing</span>
                <span class="px-3 py-1 bg-teal-100 dark:bg-teal-600 text-teal-700 dark:text-gray-200 rounded-full text-sm">Meditation</span>
                <span class="px-3 py-1 bg-teal-100 dark:bg-teal-600 text-teal-700 dark:text-gray-200 rounded-full text-sm">Self Defense</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Related Examples

Product card for eCommerce website

Steven Kuhn

4 years ago

13.3k
Profile card
Profile card with social icons

Krishna Gudpalle

4 years ago

13.7k
User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Prashant

4 years ago

65.6k
User profile card with Cover Image

Noob

4 years ago

33.9k
User Profile Card
Useful for testimonials and reviews section

Abhijit Sen

3 years ago

11.2k
Minimal Profile card

Abhijit Sen

3 years ago

12.3k
Responsive user card with tailwind

Gopi Yadav

3 years ago

11.9k
Author box

Mr Robot

3 years ago

12.5k
Profile card

Mr Robot

3 years ago

13.4k
User profile card

Mr Robot

3 years ago

12k
Product card

Simon Scheffer

3 years ago

32.4k
Testimonial card with image

Simon Scheffer

3 years ago

12.8k