diff --git a/assets/images/card-cover.jpg b/assets/images/card-cover.jpg
new file mode 100644
index 0000000..eb8abc8
Binary files /dev/null and b/assets/images/card-cover.jpg differ
diff --git a/components/CardBook.vue b/components/CardBook.vue
new file mode 100644
index 0000000..6593e4b
--- /dev/null
+++ b/components/CardBook.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="card-book">
+    <img class="w-2/4 float-left" src="@/assets/images/card-cover.jpg" alt="card" />
+    <div class="w-2/4 px-2 py-2 float-right">
+      <span class="text-xs text-gray-700">Kevin Kwan</span>
+      <h1 class="font-bold text-sm">Crazy rich asians</h1>
+      <div class="flex justify-between items-center">
+        <v-rating v-model="rating" color="#F2C94C" size="10"></v-rating>
+        <span class="text-xs text-gray-700">252 reviews</span>
+      </div>
+      <p class="text-xs text-gray-700 mt-1 leading-none">
+        the outrageously funny debut novel about three super-rich, pedigreed Chinese families and the gossip
+      </p>
+      <span class="font-bold text-sm">$4.99</span>
+      <span class="text-gray-600 text-xs line-through">$24.12</span>
+      <v-btn small class="uppercase w-full" outlined color="indigo">Buy Now</v-btn>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from 'nuxt-property-decorator'
+@Component({})
+export default class CardBook extends Vue {
+  private rating: number = 2
+}
+</script>
+<style lang="scss">
+.card-book {
+  .v-rating .v-icon {
+    padding: 0.1rem 0.25rem 0.25rem 0;
+  }
+}
+</style>
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
new file mode 100644
index 0000000..864d333
--- /dev/null
+++ b/config/tailwind.config.js
@@ -0,0 +1,11 @@
+/*
+ ** TailwindCSS Configuration File
+ **
+ ** Docs: https://tailwindcss.com/docs/configuration
+ ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
+ */
+module.exports = {
+  theme: {},
+  variants: {},
+  plugins: []
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 0318029..ec96604 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -102,7 +102,7 @@ const config: Configuration = {
     /*
      ** You can extend webpack config here
      */
-    extractCSS: true,
+    extractCSS: { ignoreOrder: true },
     extend(config: WebpackConfiguration, ctx) {},
     // Config for Nuxt Property Decorator
     babel: {
diff --git a/pages/bookshop.vue b/pages/bookshop.vue
new file mode 100644
index 0000000..27c9e94
--- /dev/null
+++ b/pages/bookshop.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="card">
+    <CardBook />
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+import CardBook from '@/components/CardBook.vue'
+@Component({
+  components: {
+    CardBook
+  }
+})
+export default class extends Vue {}
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index e4e3c67..5400eb5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,7 @@
 <template>
   <section>
     <h1 class="header">Nuxt TypeScript Starter</h1>
+    <nuxt-link to="/bookshop">Go to BookShop</nuxt-link>
     <div class="cards">
       <Card v-for="person in people" :key="person.id" :person="person"></Card>
     </div>
diff --git a/scripts/verifyCommitMsg.js b/scripts/verifyCommitMsg.js
index c63e543..f8d314e 100644
--- a/scripts/verifyCommitMsg.js
+++ b/scripts/verifyCommitMsg.js
@@ -10,7 +10,7 @@ if (!commitRE.test(msg)) {
   console.log()
   console.error(
     `  ${chalk.bgRed.white(' ERROR ')} ${chalk.red(`invalid commit message format.`)}\n\n` +
-      chalk.red(`  Proper commit message format is required for automated changelog generation. Examples:\n\n`) +
+      chalk.red(`Proper commit message format is required for automated changelog generation. Examples:\n\n`) +
       `    ${chalk.green(`feat(compiler): add 'comments' option`)}\n` +
       `    ${chalk.green(`fix(v-model): handle events on blur (close #28)`)}\n\n` +
       chalk.red(`  See .github/commit-convention.md for more details.\n`)