Compare Vue CSS

Card1.vue

<template>
  <div class="card">
    <div class="card__header">
      {{title}}
    </div>
    <div class="card__body">
      <p>{{description}}</p>
    </div>
    <div class="card__footer">
      {{date}}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    description: String,
    date: String,
  }
}
</script>

<style lang="postcss" scoped>
.card {
  @apply flex items-start justify-between;
  width: 400px;

  &__header {
    @apply font-bold italic text-6xl;
  }

  &__body {
    @apply text-lg;
  }

  &__footer {
    @apply text-sm text-gray-400;
  }
}
</style>

Card2.vue

<template>
  <div class="flex items-start justify-between" :style="{width: '400px'}">
    <div class="font-bold italic text-6xl">
      {{title}}
    </div>
    <div class="text-lg">
      <p>{{description}}</p>
    </div>
    <div class="text-sm text-gray-400">
      {{date}}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    description: String,
    date: String,
  }
}
</script>