-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathThemedExample.vue
64 lines (64 loc) · 3.8 KB
/
ThemedExample.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
<template>
<div class="sm:m-6 space-y-6">
<!-- Default theme: dracula -->
<div class="relative bg-themeable-cyan max-w-4xl mx-auto overflow-hidden sm:rounded-2xl">
<img
class="absolute inset-0 h-full w-full object-cover opacity-30"
src="https://images.unsplash.com/photo-1613217784112-e0e197be6a0b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80&sat=-100"
alt="People working on laptops"
>
<div class="absolute inset-0 bg-gradient-to-br from-themeable-cyan-200 via-themeable-cyan-400 to-transparent opacity-90" />
<div class="relative max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
<h2 class="text-3xl font-extrabold text-themeable-foreground sm:text-4xl">
<span class="block">Focus on your content.</span>
<span class="block">We handle the distribution.</span>
</h2>
<p class="mt-4 text-lg leading-6 text-themeable-foreground-800">
Ac euismod vel sit maecenas id pellentesque eu sed consectetur. Malesuada adipiscing sagittis vel nulla nec.
</p>
<div class="mt-10 max-w-sm mx-auto sm:max-w-none sm:flex sm:justify-center">
<div class="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5">
<a
href="#"
class="text-themeable-background bg-themeable-cyan-600 hover:bg-themeable-cyan-700 flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm sm:px-8"
> Get started </a>
<a
href="#"
class="text-themeable-cyan bg-themeable-background flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm hover:bg-themeable-background-100 sm:px-8"
> Live demo </a>
</div>
</div>
</div>
</div>
<!-- Theme: material -->
<div class="themeable-material relative bg-themeable-cyan max-w-4xl mx-auto overflow-hidden sm:rounded-2xl">
<img
class="absolute inset-0 h-full w-full object-cover opacity-30"
src="https://images.unsplash.com/photo-1613217784112-e0e197be6a0b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80&sat=-100"
alt="People working on laptops"
>
<div class="absolute inset-0 bg-gradient-to-br from-themeable-cyan-200 via-themeable-cyan-400 to-transparent opacity-90" />
<div class="relative max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
<h2 class="text-3xl font-extrabold text-themeable-foreground sm:text-4xl">
<span class="block">Focus on your content.</span>
<span class="block">We handle the distribution.</span>
</h2>
<p class="mt-4 text-lg leading-6 text-themeable-foreground-800">
Ac euismod vel sit maecenas id pellentesque eu sed consectetur. Malesuada adipiscing sagittis vel nulla nec.
</p>
<div class="mt-10 max-w-sm mx-auto sm:max-w-none sm:flex sm:justify-center">
<div class="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5">
<a
href="#"
class="text-themeable-background bg-themeable-cyan-600 hover:bg-themeable-cyan-700 flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm sm:px-8"
> Get started </a>
<a
href="#"
class="text-themeable-cyan bg-themeable-background flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm hover:bg-themeable-background-100 sm:px-8"
> Live demo </a>
</div>
</div>
</div>
</div>
</div>
</template>