Home
Sergio Gonzalez
MOVIE CARD

MOVIE CARD

Movie Card

This tailwind example is contributed by Sergio Gonzalez , on 18-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Product Showcase, Product card

Card Product

Author Sergio Gonzalez

Fork Fullscreen

<div>
        <h2 class="text-3xl font-extrabold mb-4">AVENGERS END GAME</h2>
        <p class="text-gray-700 text-sm italic mb-8 leading-relaxed">After Thanos, an intergalactic warlord, disintegrates half of the universe, the Avengers must reunite and assemble again to reinvigorate their trounced allies and restore balance.</p>
      </div>

<li><span class="font-semibold">🎬 Director:</span> Anthony Russo, Joe Russo</li>
        <li><span class="font-semibold">📂 Categoría:</span> Action/Sci-fi </li>
        <li><span class="font-semibold">📅 Estreno:</span> April 26, 2019</li>
        <li><span class="font-semibold">🏢 Distribuidora:</span> Walt Disney Studios Motion Pictures</li>
        <li><span class="font-semibold">⏳ Duración:</span> 3h 1m</li>
        <li><span class="font-semibold">🗣 Idioma Original:</span> English</li>
        <li><span class="font-semibold">🌍 País:</span> USA</li>
        <li><span class="font-semibold">🔞 Clasificación:</span> B</li>
        <li><span class="font-semibold">⭐ Rating:</span> 9.8/10</li>
        <li><span class="font-semibold">🗳 Votos:</span> 200</li>
        <li><span class="font-semibold">💰 Presupuesto:</span> $2.799 billion</li>
        <li><span class="font-semibold">🎟 Recaudación:</span> $5.799 billion </li>
      </ul>

<div class="flex gap-6 pt-8">
        <a
          [href]="movie.trailer_path"
          target="_blank"
          class="flex-1 bg-red-600 hover:bg-red-700 text-white font-semibold px-6 py-3 rounded-xl shadow-md transition focus:outline-none focus:ring-4 focus:ring-red-400 text-center"
          aria-label="Ver tráiler de la película">
          🎞 Watch Trailer
        </a>
        <a
          [href]="movie.where_see"
          target="_blank"
          class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-3 rounded-xl shadow-md transition focus:outline-none focus:ring-4 focus:ring-blue-400 text-center"
          aria-label="Ver película completa">
          ▶️ Where Watch 
        </a>
      </div>

</div>
  </div>
</div>

Related Examples