Home widgets

home.html

@@ -36,6 +36,58 @@
 	<!-- Heading -->
 	<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">Time Safari</h1>
 
+	<!-- Tabs -->
+	<!-- div class="text-center text-slate-500 border-b border-slate-300 mb-8">
+		<ul class="flex flex-wrap justify-center gap-4 -mb-px">
+			<li>
+				<a href="#" class="inline-block py-3 rounded-t-lg border-b-2 active text-blue-600 border-blue-600 font-semibold">
+					Dashboard
+				</a>
+			</li>
+			<li>
+				<a href="#" class="inline-block py-3 rounded-t-lg border-b-2 border-transparent hover:text-slate-600 hover:border-slate-300">
+					Gives
+				</a>
+			</li>
+			<li>
+				<a href="#" class="inline-block py-3 rounded-t-lg border-b-2 border-transparent hover:text-slate-600 hover:border-slate-300">
+					Offers
+				</a>
+			</li>
+			<li>
+				<a href="#" class="inline-block py-3 rounded-t-lg border-b-2 border-transparent hover:text-slate-600 hover:border-slate-300">
+					Projects
+				</a>
+			</li>
+		</ul>
+	</div -->
+
+	<!-- Dashboard Widgets -->
+	<div class="mb-8">
+		<div class="grid grid-cols-3 gap-2">
+			<a href="" class="bg-slate-100 rounded-md overflow-hidden px-2 md:px-4 py-3">
+				<div class="text-3xl md:text-4xl font-light">888</div>
+				<h4 class="text-xs font-bold uppercase">New Gives</h4>
+				<!-- div class="bg-slate-300 rounded-full overflow-hidden mt-2">
+					<div class="bg-slate-500 h-2 w-[76%]"></div>
+				</div -->
+				<p class="text-xs text-slate-500 leading-tight mt-0.5"><b>76%</b> from contacts</p>
+			</a>
+
+			<a href="" class="bg-slate-100 rounded-md overflow-hidden px-2 md:px-4 py-3">
+				<div class="text-3xl md:text-4xl font-light">8,888</div>
+				<h4 class="text-xs font-bold uppercase">New Offers</h4>
+			</a>
+
+			<a class="bg-slate-100 rounded-md overflow-hidden px-2 md:px-4 py-3">
+				<div class="text-3xl md:text-4xl font-light">88</div>
+				<h4 class="text-xs font-bold uppercase">New Projects</h4>
+				<p class="text-xs text-slate-500 leading-tight mt-0.5">for you</p>
+			</a>
+		</div>
+	</div>
+
+	<!-- Record Something -->
 	<div class="mb-8">
 		<div class="flex justify-between items-center">
 			<h2 class="text-xl font-bold">Record Something Given By:</h2>