diff --git a/resources/css/components/post-card.css b/resources/css/components/post-card.css
new file mode 100644
index 0000000..c6922e2
--- /dev/null
+++ b/resources/css/components/post-card.css
@@ -0,0 +1,53 @@
+.post-card {
+  @apply p-8 border border-primary relative grid gap-12 bg-white;
+  grid-template-columns: 1fr 40px;
+
+  &.has-cover {
+    grid-template-columns: 1fr 3fr 40px;
+  }
+
+  .content-meta {
+    @apply mb-4;
+    .content-meta__type--revue {
+      @apply text-lg;
+    }
+  }
+  &__title {
+    @apply text-3xl font-normal;
+  }
+  &__date {
+    @apply capitalize pt-3 block;
+  }
+
+  &__cover {
+    @apply p-2  object-cover w-full h-36  relative;
+    z-index: 10;
+    img {
+      @apply w-full h-full object-cover;
+    }
+    &:before,
+    &:after {
+      content: '';
+      @apply absolute top-0 left-0 w-full h-full;
+    }
+    &:before {
+      z-index: -1;
+      @apply bg-white border  border-primary;
+    }
+    &:after {
+      z-index: -2;
+      @apply border border-primary;
+      transform: translate(12px, 12px) rotate(3deg);
+      background-image: linear-gradient(#efe8ff, #efe8ff);
+      background-size: calc(100% - 12px) calc(100% - 12px);
+      background-repeat: no-repeat;
+      background-position: center;
+      background-blend-mode: color-burn;
+    }
+  }
+
+  .issue-number {
+    @apply bg-primary text-white w-full h-auto flex items-center justify-center;
+    aspect-ratio: 1/1;
+  }
+}