Home
farid
Expandable Card

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 CSS v3. 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

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