popskip/components/ProjectCard.vue

<template>
    <div class="card project-card">
        <div class="card-image">
        </div>
        <div class="card-content">
          <div class="card-title">
              <h1>{{name}}</h1>
          </div>
          <div class="card-content my-4">
              <p>{{description}}</p>
          </div>
          <div class="card-footer">
              <p><a :href="url || '#'">Website</a></p>
          </div>
        </div>
    </div>
</template>

<script>
export default {
    props: [ 'name', 'description', 'url' ],
}
</script>

<style>
.project-card {
    @apply mx-4 my-4 w-full flex flex-col;
}
@screen md {
    .project-card {
        @apply flex-row;
    }
}
</style>