-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathBest.vue
122 lines (122 loc) · 4.92 KB
/
Best.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<template>
<section class="">
<div class="container px-4 py-24 mx-auto sm:px-16 text-cPrimary">
<div
class="flex flex-col flex-wrap items-center w-full mb-20 text-center"
>
<h1 class="mb-2 text-3xl font-medium sm:text-4xl text-cGelap">
Best Coffee from Indonesia
</h1>
<p class="w-full leading-relaxed lg:w-1/2">
The following data is taken from several reliable sources, and here
are the 5 best coffees
</p>
</div>
<div class="flex flex-wrap items-start justify-center -m-4">
<div class="p-4 xl:w-1/3 md:w-1/2">
<div
class="p-6 relative duration-[150ms] ease-in-out border rounded-lg hover:shadow-md bg-cMuda hover:-translate-y-1 sm:h-64"
>
<div
class="absolute -top-4 right-2 "
>
<div>
<h1 class="flex items-center justify-center w-10 h-10 mb-4 text-lg rounded-full text-cWhite bg-cUngu">1</h1>
</div>
</div>
<h2 class="mb-2 text-lg font-medium text-gray-900 title-font">
Gayo Coffee – Aceh
</h2>
<p class="text-base leading-relaxed">
One of the best types of Aceh coffee is Gayo arabica coffee from
Sumatra province. This Aceh gayo coffee has a watery texture, not
too concentrated, and the acidity level is balanced.
</p>
</div>
</div>
<div class="p-4 xl:w-1/3 md:w-1/2">
<div
class="p-6 relative duration-[150ms] ease-in-out border rounded-lg hover:shadow-md bg-cMuda hover:-translate-y-1 sm:h-64"
>
<div
class="absolute -top-4 right-2 "
>
<div>
<h1 class="flex items-center justify-center w-10 h-10 mb-4 text-lg rounded-full text-cWhite bg-cUngu">2</h1>
</div>
</div>
<h2 class="mb-2 text-lg font-medium text-gray-900 title-font">
Kintamani Coffee – Bali
</h2>
<p class="text-base leading-relaxed">
Kintamani coffee is one type of coffee that is popular in Japan,
Europe, and Arabia. A distinctive feature of kintamani coffee is
that it tastes a bit bitter and has an orange flavor.
</p>
</div>
</div>
<div class="p-4 xl:w-1/3 md:w-1/2">
<div
class="p-6 relative duration-[150ms] ease-in-out border rounded-lg hover:shadow-md bg-cMuda hover:-translate-y-1 sm:h-64"
>
<div
class="absolute -top-4 right-2 "
>
<div>
<h1 class="flex items-center justify-center w-10 h-10 mb-4 text-lg rounded-full text-cWhite bg-cUngu">3</h1>
</div>
</div>
<h2 class="mb-2 text-lg font-medium text-gray-900 title-font">
Toraja Coffee
</h2>
<p class="text-base leading-relaxed">
Toraja coffee has a cinnamon or cardamom flavor. Even Key Coffe, a
Japanese company has patented toraja coffee as a premium drink.
</p>
</div>
</div>
<div class="p-4 xl:w-1/3 md:w-1/2">
<div
class="p-6 relative duration-[150ms] ease-in-out border rounded-lg hover:shadow-md bg-cMuda hover:-translate-y-1 sm:h-64"
>
<div
class="absolute -top-4 right-2 "
>
<div>
<h1 class="flex items-center justify-center w-10 h-10 mb-4 text-lg rounded-full text-cWhite bg-cUngu">4</h1>
</div>
</div>
<h2 class="mb-2 text-lg font-medium text-gray-900 title-font">
Flores Bajawa Coffee
</h2>
<p class="text-base leading-relaxed">
A distinctive feature of the taste of flores coffee is its nutty
taste or nuts and caramel. The texture is also thick with a
slightly sour sensation.
</p>
</div>
</div>
<div class="p-4 xl:w-1/3 md:w-1/2">
<div
class="p-6 relative duration-[150ms] ease-in-out border rounded-lg hover:shadow-md bg-cMuda hover:-translate-y-1 sm:h-64"
>
<div
class="absolute -top-4 right-2 "
>
<div>
<h1 class="flex items-center justify-center w-10 h-10 mb-4 text-lg rounded-full text-cWhite bg-cUngu">5</h1>
</div>
</div>
<h2 class="mb-2 text-lg font-medium text-gray-900 title-font">
Luwak Coffee
</h2>
<p class="text-base leading-relaxed">
The characteristics of civet coffee are that it smells like
pandanus. The fragrance can be smelled up to meters
</p>
</div>
</div>
</div>
</div>
</section>
</template>