dont know ?

public/css/app.css

@@ -1,118 +1,71 @@
- .items,
-        .item {
-        flex-flow: row wrap;
-        }
-        .items .item,
-        .item .item {
-        margin: 20px;
-        width: 120px;
-        height: 180px;
-        overflow: hidden;
-        box-shadow: 0 5px 10px rgba(0,0,0,0.8);
-        transform-origin: center top;
-        transform-style: preserve-3d;
-        transform: translateZ(0);
-        transition: 0.3s;
-        }
-        .items .item img,
-        .item .item img {
-        width: 100%;
-        min-height: 100%;
-        }
-        .items .item figcaption,
-        .item .item figcaption {
-        bottom: 0;
-        left: 0;
-        right: 0;
-        padding: 20px;
-        padding-bottom: 10px;
-        font-size: 20px;
-        background: none;
-        color: #fff;
-        transform: translateY(100%);
-        transition: 0.3s;
-        }
-        .items .item:after,
-        .item .item:after {
-        content: '';
-        z-index: 10;
-        width: 200%;
-        height: 100%;
-        top: -90%;
-        left: -20px;
-        opacity: 0.1;
-        transform: rotate(45deg);
-        background: linear-gradient(to top, transparent, #fff 15%, rgba(255,255,255,0.5));
-        transition: 0.3s;
-        }
-        .items .item:hover,
-        .item .item:hover,
-        .items .item:focus,
-        .item .item:focus,
-        .items .item:active,
-        .item .item:active {
-        box-shadow: 0 8px 16px 3px rgba(0,0,0,0.6);
-        transform: translateY(-3px) scale(1.05) rotateX(15deg);
-        }
-        .items .item:hover figcaption,
-        .item .item:hover figcaption,
-        .items .item:focus figcaption,
-        .item .item:focus figcaption,
-        .items .item:active figcaption,
-        .item .item:active figcaption {
-        transform: none;
-        }
-        .items .item:hover:after,
-        .item .item:hover:after,
-        .items .item:focus:after,
-        .item .item:focus:after,
-        .items .item:active:after,
-        .item .item:active:after {
-        transform: rotate(25deg);
-        top: -40%;
-        opacity: 0.15;
-        }
-        .item .article {
-        overflow: hidden;
-        width: 350px;
-        height: 235px;
-        margin: 20px;
-        }
-        .item .article img {
-        width: 100%;
-        min-height: 100%;
-        transition: 0.2s;
-        }
-        .item .article figcaption {
-        font-size: 14px;
-        text-shadow: 0 1px 0 rgba(51,51,51,0.3);
-        color: #fff;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        padding: 40px;
-        box-shadow: 0 0 2px rgba(0,0,0,0.2);
-        background: rgba(6,18,53,0.6);
-        opacity: 0;
-        transform: scale(1.15);
-        transition: 0.2s;
-        }
-        .item .article figcaption h3 {
-        color: #3792e3;
-        font-size: 16px;
-        margin-bottom: 0;
-        font-weight: bold;
-        }
-        .item .article:hover img,
-        .item .article:focus img,
-        .item .article:active img {
-        filter: blur(3px);
-        transform: scale(0.97);
-        }
-        .item .article:hover figcaption,
-        .item .article:focus figcaption,
-        .item .article:active figcaption {
-        opacity: 1;
-        transform: none;
-        }
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom styles for media cards */
+.items {
+  @apply flex flex-wrap;
+}
+
+.item {
+  @apply m-5 w-32 h-48 overflow-hidden shadow-lg transform-gpu transition-transform duration-300 origin-top;
+}
+
+.item img {
+  @apply w-full min-h-full;
+}
+
+.item figcaption {
+  @apply absolute bottom-0 left-0 right-0 p-5 pb-2.5 text-xl bg-transparent text-white transform translate-y-full transition-transform duration-300;
+}
+
+.item::after {
+  content: '';
+  @apply absolute z-10 w-full h-full -top-9/10 -left-5 opacity-10 rotate-45 bg-gradient-to-t from-transparent via-white/15 to-white/50 transition-all duration-300;
+}
+
+.item:hover,
+.item:focus,
+.item:active {
+  @apply shadow-2xl -translate-y-1 scale-105 rotate-x-15;
+}
+
+.item:hover figcaption,
+.item:focus figcaption,
+.item:active figcaption {
+  @apply translate-y-0;
+}
+
+.item:hover::after,
+.item:focus::after,
+.item:active::after {
+  @apply rotate-25 -top-2/5 opacity-15;
+}
+
+.article {
+  @apply overflow-hidden w-80 h-56 m-5;
+}
+
+.article img {
+  @apply w-full min-h-full transition-all duration-200;
+}
+
+.article figcaption {
+  @apply absolute inset-0 p-10 text-sm text-white bg-blue-900/60 opacity-0 scale-115 transition-all duration-200 shadow-sm;
+}
+
+.article figcaption h3 {
+  @apply text-blue-300 text-base mb-0 font-bold;
+}
+
+.article:hover img,
+.article:focus img,
+.article:active img {
+  @apply blur-sm scale-95;
+}
+
+.article:hover figcaption,
+.article:focus figcaption,
+.article:active figcaption {
+  @apply opacity-100 scale-100;
+}