title: tailwind elements showing on hover but not normally when placed at top left and right
body: <p>I am trying to make a card that expands on hover and shows some extra elements, but some of the elements I want before the hover are not showing up but they do on hover?</p>
  <pre><code>import { CashIcon, ArrowRightIcon } from '@heroicons/react/solid'
  import {ClockIcon} from '@heroicons/react/outline'
  import { BsTelegram, BsTwitter } from &quot;react-icons/bs&quot;
  
  const people = [
    {
      name: 'Jane Cooper',
      title: 'Ethereum',
      role: '$5',
      email: 'janecooper@example.com',
      telephone: '+1-202-555-0170',
      isExpired: true,
      timeLeft:'5hrs Left',
      imageUrl:
        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=60',
    },
    {
      name: 'Jane Cooper',
      title: 'Binance',
      role: '$5',
      email: 'janecooper@example.com',
      telephone: '+1-202-555-0170',
      isExpired: true,
      timeLeft:'5hrs Left',
      imageUrl:
        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=60',
    }
    // More people...
  ]
  
  export default function FeaturedDrops() {
    return (
      &lt;ul role=&quot;list&quot; className=&quot;grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3&quot;&gt;
        {people.map((person) =&gt; (
          &lt;li key={person.email} className=&quot;col-span-1 bg-white rounded-lg shadow divide-y divide-gray-200 group hover:scale-110 hover:bg-slate-100 hover:transition ease-linear duration-500&quot;&gt;
            &lt;div className=&quot;w-full flex items-center justify-between p-6 space-x-6 translate-y-0 group-hover:translate-y-1 transition  duration-300 group-hover:overflow-hidden &quot;&gt;
              &lt;div className=&quot;flex-1 truncate&quot;&gt;
                &lt;div className=&quot;flex items-center space-x-3&quot;&gt;
                  &lt;h3 className=&quot;text-gray-900 text-sm font-medium truncate&quot;&gt;{person.name}&lt;/h3&gt;
                  &lt;span className=&quot;flex-shrink-0 flex px-2 py-0.5 text-green-800 text-xs font-medium bg-green-100 rounded-full&quot;&gt;
                    &lt;CashIcon className='w-4 h-4 text-green-500' aria-hidden=&quot;true&quot; /&gt;
                    &lt;span className='mr-2 ml-1 text-gray-500 font-bold'&gt;
                      {person.role}
                    &lt;/span&gt;
                  &lt;/span&gt;
                &lt;/div&gt;
                &lt;span className=&quot;flex-shrink-1 flex px-2 w-24 mt-2 py-0.5 text-green-800 text-xs font-medium bg-blue-200 rounded-full&quot;&gt;
                    &lt;CashIcon className='w-4 h-4 text-green-500' aria-hidden=&quot;true&quot; /&gt;
                    &lt;span className='ml-1 text-gray-500 font-bold'&gt;
                      {person.title}
                    &lt;/span&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
              &lt;img className=&quot;w-10 h-10 bg-gray-300 rounded-full flex-shrink-0&quot; src={person.imageUrl} alt=&quot;&quot; /&gt;
              
            &lt;/div&gt;
            &lt;div className='invisible  group-hover:visible transition ease-in duration-100'&gt;
              &lt;div className=&quot;-mt-px flex divide-x divide-gray-200 &quot;&gt;
                &lt;div className=&quot;w-0 flex-1 flex &quot;&gt;
                  &lt;a
                    href={`mailto:${person.email}`}
                    className=&quot;relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-bl-lg hover:text-gray-500&quot;
                  &gt;
                    &lt;BsTwitter className=&quot;w-5 h-5 text-gray-400&quot; aria-hidden=&quot;true&quot; /&gt;
                    &lt;span className=&quot;ml-3&quot;&gt;Twitter&lt;/span&gt;
                  &lt;/a&gt;
                &lt;/div&gt;
                &lt;div className=&quot;-ml-px w-0 flex-1 flex &quot;&gt;
                  &lt;a
                    href={`tel:${person.telephone}`}
                    className=&quot;relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-br-lg hover:text-gray-500&quot;
                  &gt;
                    &lt;BsTelegram className=&quot;w-5 h-5 text-gray-400&quot; aria-hidden=&quot;true&quot; /&gt;
                    &lt;span className=&quot;ml-3&quot;&gt;Telegram&lt;/span&gt;
                  &lt;/a&gt;
                &lt;/div&gt;
                
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className=' group-hover:visible transition ease-in duration-100'&gt;
              &lt;div className=&quot;-mt-px flex divide-x divide-gray-200 &quot;&gt;
                &lt;div className=&quot;w-0 flex-1 flex &quot;&gt;
                  &lt;a
                    href={`mailto:${person.email}`}
                    className=&quot;relative bg-green-400 -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-bl-lg hover:text-gray-500&quot;
                  &gt;
                    &lt;span className=&quot;ml-3&quot;&gt;Go To Airdrop&lt;/span&gt;
                    &lt;ArrowRightIcon className=&quot;w-5 h-5 text-gray-400&quot; aria-hidden=&quot;true&quot; /&gt;
                  &lt;/a&gt;
                &lt;/div&gt;
                
                
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className='absolute top-0 right-0 h-5 w-16 bg-red-400 flex items-center text-white justify-center'&gt;{person.isExpired ? &lt;p className=''&gt;expired&lt;/p&gt; : &lt;&gt;&lt;/&gt;}&lt;/div&gt;
              &lt;div className='absolute  top-0 left-0 h-5 w-20 bg-white flex items-center justify-center font-medium text-xs group-hover:pb-0 group-hover:transition duration-300'&gt;
                &lt;ClockIcon className='w-4 h-4 text-gray-600' aria-hidden=&quot;true&quot; /&gt;
                {person.timeLeft}
              &lt;/div&gt;
          &lt;/li&gt;
        ))}
      &lt;/ul&gt;
    )
  }
  
  </code></pre>
  <p>I think this is because of some hidden padding issue with the container with person info. also how can we remove the gap between info container and go to container when not hovered as right now the elements show up on hover and go invisible after hover but still take up space?</p>