Flip Box

Próximamente

<!-- Tarjeta -->
<div class="aspect-square w-full group cursor-pointer perspective">
   <!-- Tarjeta interna--> 
   <div class="relative w-full h-full group-hover:-rotate-y-180 duration-slow preserve-3d"> 
      <!-- Cara frontal -->
      <div class="absolute w-full h-full backface-hidden rounded-2-xl"> 
         <!-- Imagen de fondo cara frontal -->
         <img src="https://picsum.photos/id/76/600/600" class="rounded-2xl w-full h-full object-cover"/>
         <!-- Contenido cara frontal -->
         <div class="items-center rounded-2xl bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500/30 absolute flex flex-col justify-center w-full h-full gap-xs top-0 left-0 p-xl">
            <h3 class="text-white z-10">I am a heading!</h3>
            <p>Here goes your text... Select any part of your text to access the formatting toolbar.</p>
            <a href="#" class="btn">Button card</a>
        </div>
      </div>
      <!-- Cara posterior -->
      <div class="flex flex-col justify-center items-center rounded-2xl bg-primary-200 p-md gap-2xs backface-hidden -rotate-x-180 w-full h-full overflow-hidden"> 
         <!-- Contenido cara posterior -->
         <div>
            <h3 class="text-white z-10">I am a heading!</h3>
            <p>Here goes your text... Select any part of your text to access the formatting toolbar.</p>
            <a href="#" class="btn">Button card</a>
         </div>
      </div>
   </div>
</div>