-
Notifications
You must be signed in to change notification settings - Fork 1
/
test.html
38 lines (36 loc) · 1.93 KB
/
test.html
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
<html lang="en">
<head>
<meta charset="UTF-8">
<title>KotlinJs Starter Project</title>
<link rel="stylesheet" href="/home/rfirmin/code/startup/kotlinjs-template/src/jsMain/resources/style.css">
</head>
<body>
<main class="ml-8">
<div><h1 class="text-xl text-red-500 mx-8 pt-16">Styling <span
class="from-indigo-500 via-purple-500 to-pink-500 p-4 bg-gradient-to-r text-white" id="hello">demos with KotlinJs & Tailwind</span>
</h1></div>
<svg class="w-20 h-12 bg-gray-200" xmlns="http://www.w3.org/2000/svg" data-accordion-icon="true" width="80"
height="48" viewbox="0 0 80 48">
<path stroke="#FF0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"
d="M72 40 40 8 8 40"></path>
</svg>
<div class="px-8 pt-8 flex flex-row">
<div class="w-24 m-4 p-2 flex justify-center items-center px-3 text-sm font-medium text-purple-800 bg-purple-100 rounded-lg">
This is a component!
</div>
<div class="w-24 m-4 p-2 flex justify-center items-center px-3 text-sm font-medium text-purple-800 bg-purple-100 rounded-lg">
So is this!
</div>
</div>
<div class="text-green-500 m-8"><p class="transition-all duration-500 ease-in-out cursor-pointer font-bold"
id="toggle_me">Click me to toggle classes</p></div>
<div class="inline-block">
<div class="m-4 p-4 border-dashed border-2 border-black inline-block flex flex-row gap-4"><a
class="underline text-blue-500" href="/blog">Blog</a><a class="underline text-blue-500"
href="/book-search">Book Search</a><a
class="underline text-blue-500" href="/scope">Scope</a><a class="underline text-blue-500"
href="/kanban">Kanban</a></div>
</div>
</main>
</body>
</html>