1- < p > dashboard works properly!</ p >
1+ < div class ="pt-5 pb-16 ">
2+ <!-- Welcome panel -->
3+ < section aria-labelledby ="profile-overview-title ">
4+ </ section >
5+
6+ <!-- Actions panel -->
7+ < section aria-labelledby ="quick-links-title ">
8+ < div class ="overflow-hidden divide-y rounded-lg bg-slate-200 divide-slate-200 sm:grid sm:grid-cols-2 sm:gap-px sm:divide-y-0 lg:grid-cols-3 ">
9+ < h2 class ="sr-only " id ="quick-links-title "> Quick links</ h2 >
10+
11+ < div class ="relative p-6 bg-white focus-within:ring-2 focus-within:ring-inset focus-within:ring-cyan-500 ">
12+ < div >
13+ < span class ="inline-flex p-3 text-teal-700 rounded-lg bg-teal-50 ring-4 ring-white ">
14+ < svg class ="w-6 h-6 " x-description ="Heroicon name: outline/clock " xmlns ="http://www.w3.org/2000/svg " fill ="none " viewBox ="0 0 24 24 " stroke-width ="1.5 " stroke ="currentColor " aria-hidden ="true ">
15+ < path stroke-linecap ="round " stroke-linejoin ="round " d ="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z "> </ path >
16+ </ svg >
17+ </ span >
18+ </ div >
19+ < div class ="mt-8 ">
20+ < h3 class ="text-lg font-medium ">
21+ < a href ="# " class ="focus:outline-none ">
22+ <!-- Extend touch target to entire panel -->
23+ < span class ="absolute inset-0 " aria-hidden ="true "> </ span >
24+ Request time off
25+ </ a >
26+ </ h3 >
27+ < p class ="mt-2 text-sm text-slate-500 "> Doloribus dolores nostrum quia qui natus officia quod et dolorem. Sit repellendus qui ut at.</ p >
28+ </ div >
29+ < span class ="absolute pointer-events-none text-slate-300 top-6 right-6 group-hover:text-slate-400 " aria-hidden ="true ">
30+ < svg class ="w-6 h-6 " xmlns ="http://www.w3.org/2000/svg " fill ="currentColor " viewBox ="0 0 24 24 ">
31+ < path d ="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z "> </ path >
32+ </ svg >
33+ </ span >
34+ </ div >
35+
36+ < div class ="relative p-5 bg-white group focus-within:ring-2 focus-within:ring-inset focus-within:ring-cyan-500 ">
37+ < div >
38+ < span class ="inline-flex p-3 text-purple-700 rounded-lg bg-purple-50 ring-4 ring-white ">
39+ < svg class ="w-6 h-6 " x-description ="Heroicon name: outline/check-badge " xmlns ="http://www.w3.org/2000/svg " fill ="none " viewBox ="0 0 24 24 " stroke-width ="1.5 " stroke ="currentColor " aria-hidden ="true ">
40+ < path stroke-linecap ="round " stroke-linejoin ="round " d ="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z "> </ path >
41+ </ svg >
42+ </ span >
43+ </ div >
44+ < div class ="mt-8 ">
45+ < h3 class ="text-lg font-medium ">
46+ < a href ="# " class ="focus:outline-none ">
47+ <!-- Extend touch target to entire panel -->
48+ < span class ="absolute inset-0 " aria-hidden ="true "> </ span >
49+ Benefits
50+ </ a >
51+ </ h3 >
52+ < p class ="mt-2 text-sm text-slate-500 "> Doloribus dolores nostrum quia qui natus officia quod et dolorem. Sit repellendus qui ut at.</ p >
53+ </ div >
54+ < span class ="absolute pointer-events-none text-slate-300 top-6 right-6 group-hover:text-slate-400 " aria-hidden ="true ">
55+ < svg class ="w-6 h-6 " xmlns ="http://www.w3.org/2000/svg " fill ="currentColor " viewBox ="0 0 24 24 ">
56+ < path d ="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z "> </ path >
57+ </ svg >
58+ </ span >
59+ </ div >
60+
61+ < div class ="relative p-5 bg-white group focus-within:ring-2 focus-within:ring-inset focus-within:ring-cyan-500 ">
62+ < div >
63+ < span class ="inline-flex p-3 rounded-lg bg-sky-50 text-sky-700 ring-4 ring-white ">
64+ < svg class ="w-6 h-6 " x-description ="Heroicon name: outline/users " xmlns ="http://www.w3.org/2000/svg " fill ="none " viewBox ="0 0 24 24 " stroke-width ="1.5 " stroke ="currentColor " aria-hidden ="true ">
65+ < path stroke-linecap ="round " stroke-linejoin ="round " d ="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z "> </ path >
66+ </ svg >
67+ </ span >
68+ </ div >
69+ < div class ="mt-8 ">
70+ < h3 class ="text-lg font-medium ">
71+ < a href ="# " class ="focus:outline-none ">
72+ <!-- Extend touch target to entire panel -->
73+ < span class ="absolute inset-0 " aria-hidden ="true "> </ span >
74+ Schedule a one-on-one
75+ </ a >
76+ </ h3 >
77+ < p class ="mt-2 text-sm text-slate-500 "> Doloribus dolores nostrum quia qui natus officia quod et dolorem. Sit repellendus qui ut at.</ p >
78+ </ div >
79+ < span class ="absolute pointer-events-none text-slate-300 top-6 right-6 group-hover:text-slate-400 " aria-hidden ="true ">
80+ < svg class ="w-6 h-6 " xmlns ="http://www.w3.org/2000/svg " fill ="currentColor " viewBox ="0 0 24 24 ">
81+ < path d ="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z "> </ path >
82+ </ svg >
83+ </ span >
84+ </ div >
85+
86+ < div class ="relative p-5 bg-white group focus-within:ring-2 focus-within:ring-inset focus-within:ring-cyan-500 ">
87+ < div >
88+ < span class ="inline-flex p-3 text-yellow-700 rounded-lg bg-yellow-50 ring-4 ring-white ">
89+ < svg class ="w-6 h-6 " x-description ="Heroicon name: outline/banknotes " xmlns ="http://www.w3.org/2000/svg " fill ="none " viewBox ="0 0 24 24 " stroke-width ="1.5 " stroke ="currentColor " aria-hidden ="true ">
90+ < path stroke-linecap ="round " stroke-linejoin ="round " d ="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z "> </ path >
91+ </ svg >
92+ </ span >
93+ </ div >
94+ < div class ="mt-8 ">
95+ < h3 class ="text-lg font-medium ">
96+ < a href ="# " class ="focus:outline-none ">
97+ <!-- Extend touch target to entire panel -->
98+ < span class ="absolute inset-0 " aria-hidden ="true "> </ span >
99+ Payroll
100+ </ a >
101+ </ h3 >
102+ < p class ="mt-2 text-sm text-slate-500 "> Doloribus dolores nostrum quia qui natus officia quod et dolorem. Sit repellendus qui ut at.</ p >
103+ </ div >
104+ < span class ="absolute pointer-events-none text-slate-300 top-6 right-6 group-hover:text-slate-400 " aria-hidden ="true ">
105+ < svg class ="w-6 h-6 " xmlns ="http://www.w3.org/2000/svg " fill ="currentColor " viewBox ="0 0 24 24 ">
106+ < path d ="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z "> </ path >
107+ </ svg >
108+ </ span >
109+ </ div >
110+
111+ < div class ="relative p-5 bg-white group focus-within:ring-2 focus-within:ring-inset focus-within:ring-cyan-500 ">
112+ < div >
113+ < span class ="inline-flex p-3 rounded-lg bg-rose-50 text-rose-700 ring-4 ring-white ">
114+ < svg class ="w-6 h-6 " x-description ="Heroicon name: outline/receipt-refund " xmlns ="http://www.w3.org/2000/svg " fill ="none " viewBox ="0 0 24 24 " stroke-width ="1.5 " stroke ="currentColor " aria-hidden ="true ">
115+ < path stroke-linecap ="round " stroke-linejoin ="round " d ="M8.25 9.75h4.875a2.625 2.625 0 010 5.25H12M8.25 9.75L10.5 7.5M8.25 9.75L10.5 12m9-7.243V21.75l-3.75-1.5-3.75 1.5-3.75-1.5-3.75 1.5V4.757c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0c1.1.128 1.907 1.077 1.907 2.185z "> </ path >
116+ </ svg >
117+ </ span >
118+ </ div >
119+ < div class ="mt-8 ">
120+ < h3 class ="text-lg font-medium ">
121+ < a href ="# " class ="focus:outline-none ">
122+ <!-- Extend touch target to entire panel -->
123+ < span class ="absolute inset-0 " aria-hidden ="true "> </ span >
124+ Submit an expense
125+ </ a >
126+ </ h3 >
127+ < p class ="mt-2 text-sm text-slate-500 "> Doloribus dolores nostrum quia qui natus officia quod et dolorem. Sit repellendus qui ut at.</ p >
128+ </ div >
129+ < span class ="absolute pointer-events-none text-slate-300 top-6 right-6 group-hover:text-slate-400 " aria-hidden ="true ">
130+ < svg class ="w-6 h-6 " xmlns ="http://www.w3.org/2000/svg " fill ="currentColor " viewBox ="0 0 24 24 ">
131+ < path d ="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z "> </ path >
132+ </ svg >
133+ </ span >
134+ </ div >
135+
136+ < div class ="relative p-5 bg-white group focus-within:ring-2 focus-within:ring-inset focus-within:ring-cyan-500 ">
137+ < div >
138+ < span class ="inline-flex p-3 rounded-lg text-primary-700 bg-primary-50 ring-4 ring-white ">
139+ < svg class ="w-6 h-6 " x-description ="Heroicon name: outline/academic-cap " xmlns ="http://www.w3.org/2000/svg " fill ="none " viewBox ="0 0 24 24 " stroke-width ="1.5 " stroke ="currentColor " aria-hidden ="true ">
140+ < path stroke-linecap ="round " stroke-linejoin ="round " d ="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5 "> </ path >
141+ </ svg >
142+ </ span >
143+ </ div >
144+ < div class ="mt-8 ">
145+ < h3 class ="text-lg font-medium ">
146+ < a href ="# " class ="focus:outline-none ">
147+ <!-- Extend touch target to entire panel -->
148+ < span class ="absolute inset-0 " aria-hidden ="true "> </ span >
149+ Training
150+ </ a >
151+ </ h3 >
152+ < p class ="mt-2 text-sm text-slate-500 "> Doloribus dolores nostrum quia qui natus officia quod et dolorem. Sit repellendus qui ut at.</ p >
153+ </ div >
154+ < span class ="absolute pointer-events-none text-slate-300 top-6 right-6 group-hover:text-slate-400 " aria-hidden ="true ">
155+ < svg class ="w-6 h-6 " xmlns ="http://www.w3.org/2000/svg " fill ="currentColor " viewBox ="0 0 24 24 ">
156+ < path d ="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z "> </ path >
157+ </ svg >
158+ </ span >
159+ </ div >
160+
161+ </ div >
162+ </ section >
163+ </ div >
0 commit comments