-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathavatar.html
180 lines (142 loc) · 8.91 KB
/
avatar.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
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="tailwind_theme/tailwind.css" rel="stylesheet" type="text/css" />
<title>Flowbite Avatars</title>
</head>
<body>
<header>
<div
class="flex items-center w-full px-10 mx-auto bg-white dark:bg-gray-900"
>
<h1 class="text-3xl text-gray-900 dark:text-white">
Flowbite Components
</h1>
</div>
</header>
<section
class="flex flex-col items-center w-full px-5 mx-auto bg-gray-100 dark:bg-gray-900"
>
<div class="flex flex-col items-center gap-3 mb-2">
<h2 class="text-3xl text-gray-900 dark:text-white">Avatars</h2>
<h3 class="text-2xl text-gray-900 dark:text-white">Default Avatar</h3>
</div>
<div class="flex flex-col gap-3">
<img class="w-10 h-10 rounded-full flowbite" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Rounded avatar">
<img class="w-10 h-10 rounded flowbite" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Default avatar">
</div>
<div class="flex flex-col items-center gap-1 my-10">
<h3 class="text-2xl text-gray-900 dark:text-white">Bordered</h3>
</div>
<img class="w-10 h-10 p-1 rounded-full flowbite ring-2 ring-gray-300 dark:ring-gray-500" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Bordered avatar">
<div class="flex flex-col items-center gap-1 my-10">
<h3 class="text-2xl text-gray-900 dark:text-white">Placeholder Icon</h3>
</div>
<div class="relative w-10 h-10 overflow-hidden bg-gray-100 rounded-full flowbite dark:bg-gray-600">
<svg class="absolute w-12 h-12 text-gray-400 -left-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
</div>
<div class="flex flex-col items-center gap-1 my-10">
<h3 class="text-2xl text-gray-900 dark:text-white">Placeholder Initials</h3>
</div>
<div class="relative inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-gray-100 rounded-full flowbite dark:bg-gray-600">
<span class="font-medium text-gray-600 dark:text-gray-300">JL</span>
</div>
<div class="flex flex-col items-center gap-1 my-10">
<h3 class="text-2xl text-gray-900 dark:text-white">Avatar tooltip</h3>
</div>
<div class="flowbite">
<div id="tooltip-jese" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
Jese Leos
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
<img data-tooltip-target="tooltip-jese" class="w-10 h-10 rounded" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Medium avatar">
</div>
</div>
<div class="flex flex-col items-center gap-1 my-10">
<h3 class="text-2xl text-gray-900 dark:text-white">Dot Indicator</h3>
</div>
<div class="flex flex-col gap-3">
<div class="relative flowbite">
<img class="w-10 h-10 rounded-full" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="">
<span class="top-0 left-7 absolute w-3.5 h-3.5 bg-green-400 border-2 border-white dark:border-gray-800 rounded-full"></span>
</div>
<div class="relative flowbite">
<img class="w-10 h-10 rounded" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="">
<span class="absolute top-0 left-8 transform -translate-y-1/2 w-3.5 h-3.5 bg-red-400 border-2 border-white dark:border-gray-800 rounded-full"></span>
</div>
<div class="relative flowbite">
<img class="w-10 h-10 rounded-full" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="">
<span class="bottom-0 left-7 absolute w-3.5 h-3.5 bg-green-400 border-2 border-white dark:border-gray-800 rounded-full"></span>
</div>
<div class="relative flowbite">
<img class="w-10 h-10 rounded" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="">
<span class="absolute bottom-0 left-8 transform translate-y-1/4 w-3.5 h-3.5 bg-green-400 border-2 border-white dark:border-gray-800 rounded-full"></span>
</div>
</div>
<div class="flex flex-col items-center gap-1 my-10">
<h3 class="text-2xl text-gray-900 dark:text-white">Stacked</h3>
</div>
<div class="flex mb-5 -space-x-4 flowbite">
<img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="">
<img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="https://flowbite.com/docs/images/people/profile-picture-2.jpg" alt="">
<img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="https://flowbite.com/docs/images/people/profile-picture-3.jpg" alt="">
<img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="https://flowbite.com/docs/images/people/profile-picture-4.jpg" alt="">
</div>
<div class="flex -space-x-4 flowbite">
<img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="">
<img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="https://flowbite.com/docs/images/people/profile-picture-2.jpg" alt="">
<img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="https://flowbite.com/docs/images/people/profile-picture-3.jpg" alt="">
<a class="flex items-center justify-center w-10 h-10 text-xs font-medium text-white bg-gray-700 border-2 border-white rounded-full hover:bg-gray-600 dark:border-gray-800" href="#">+99</a>
</div>
<div class="flex flex-col items-center gap-1 my-10">
<h3 class="text-2xl text-gray-900 dark:text-white">Avatar Text</h3>
</div>
<div class="flex items-center space-x-4 flowbite">
<img class="w-10 h-10 rounded-full" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="">
<div class="font-medium dark:text-white">
<div>Jese Leos</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Joined in August 2014</div>
</div>
</div>
<div class="flex flex-col items-center gap-1 my-10">
<h3 class="text-2xl text-gray-900 dark:text-white">User Dropdown</h3>
</div>
<img id="avatarButton" type="button" data-dropdown-toggle="userDropdown" data-dropdown-placement="bottom-start" class="w-10 h-10 rounded-full cursor-pointer flowbite" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="User dropdown">
<!-- Dropdown menu -->
<div id="userDropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded shadow flowbite w-44 dark:bg-gray-700 dark:divide-gray-600">
<div class="px-4 py-3 text-sm text-gray-900 dark:text-white">
<div>Bonnie Green</div>
<div class="font-medium truncate">[email protected]</div>
</div>
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="avatarButton">
<li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Dashboard</a>
</li>
<li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Settings</a>
</li>
<li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Earnings</a>
</li>
</ul>
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Sign out</a>
</div>
</div>
<div class="flex flex-col items-center gap-1 my-10">
<h3 class="text-2xl text-gray-900 dark:text-white">Sizes</h3>
</div>
<div class="flex flex-col gap-3">
<img class="w-6 h-6 rounded flowbite" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Extra small avatar">
<img class="w-8 h-8 rounded flowbite" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Small avatar">
<img class="w-10 h-10 rounded flowbite" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Medium avatar">
<img class="w-20 h-20 rounded flowbite" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Large avatar">
<img class="rounded flowbite w-36 h-36" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Extra large avatar">
</div>
</section>
<script src="./node_modules/flowbite/dist/flowbite.js"></script>
</body>
</html>