<template>
  <div id="app" class="font-anko-regular">
    App.js
    <!-- <header class="flex justify-between">
      <div class="sm:w-1/5 px-2 text-left">
        <img class="mx-auto" alt="Vue logo" src="@/assets/images/logo.png" />
      </div>

      <div class="md:bg-white sm:w-2/5 w-full px-2 py-2 sm:bg-warm">
        <input
          class="bg-white shadow focus:outline-0 focus:shadow-outline border border-cool-100 py-2 px-4 block w-full appearance-none leading-normal"
          type="text"
          name="search"
          placeholder="Find a product"
        />
      </div>

      <div class="sm:w-2/5 px-2">
        <div class="flex justify-between">
          <KmartButton tag="a" href="#" styles="w-1/4">
            <KmartIcon name="location" label="Stores"></KmartIcon>
          </KmartButton>
          <KmartIcon name="heart" size="lg" label="Wishlist" styles="w-1/4"></KmartIcon>
          <KmartIcon name="bag" label="Bag" styles="w-1/4"></KmartIcon>
          <KmartIcon name="person" label="Sign in" styles="w-1/4"></KmartIcon>
        </div>
      </div>
    </header>-->
    <KmartHeading level="h1">Hello</KmartHeading>
    <KmartButton theme="primary" tag="input" @click="this.onHandleClick">abc</KmartButton>
  </div>
</template>

<script>
import './main.css'
// import KmartButton from '@/components/KmartButton/KmartButton.vue'
// import KmartHeading from '@/components/KmartHeading/KmartHeading.vue'

export default {
  name: 'App',
  methods: {
    onHandleClick() {
      console.log('hello')
    }
  }
}
</script>

<style lang="postcss">
#app {
  @apply my-2 text-center;
}
</style>
