virages/components/article.vue

<template>
  <article class="group hover:bg-sky-500 hover:cursor-pointer p-4">
    <figure class="mb-8">
      <figcaption class="text-center text-black z-article-title relative">
        <h2 class="bebas-neue-regular uppercase text-6xl">
          william turner
        </h2>
        <p class="noto-sans-400 text-2xl capitalize tracking-widest">
          the burning of the houses
        </p>
      </figcaption>
      <img class="-mt-20 z-article-image" src="https://files.erudi.fr/virages/turner.jpg" alt="">
    </figure>
    <footer class="footer">
      <h3 class="bebas-neue-regular uppercase text-5xl">
        Romantisme
      </h3>
      <section class="flex mt-6">
        <span class="bebas-neue-regular uppercase text-5xl mt-4">
          1834
        </span>
        <div class="noto-sans-400 text-2xl ml-6">
          <div class="mb-2">
            paysage urbain
          </div>
          <div class="text-slate-600">
            huile sur toile
          </div>
        </div>
      </section>
    </footer>
  </article>
</template>