Free
Stats
UniGlobe Stats
A stats block extracted from the UniGlobe template, available in Tailwind CSS, Bootstrap, DaisyUI, and Material Design.
0
14
uniglobe.html
<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.FontAwesomeConfig = {
autoReplaceSvg: 'nest'
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UniGlobe Stats | Tailwind CSS UI Block</title>
<meta name="description" content="A stats block extracted from the UniGlobe template, available in Tailwind CSS, Bootstrap, DaisyUI, and Material Design.">
<meta name="keywords" content="UniGlobe, Tailwind CSS template, HTML website template, study abroad template, university landing page, international education, responsive student website">
<meta name="author" content="Let's templates">
<link rel="canonical" href="">
<meta property="og:type" content="product">
<meta property="og:site_name" content="Let's templates">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="">
<meta property="og:title" content="UniGlobe | Tailwind CSS Study Abroad Template">
<meta property="og:description" content="A modern Tailwind CSS study-abroad template for universities, international courses, destinations, applications, and student guidance.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="UniGlobe template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="UniGlobe | Tailwind CSS Study Abroad Template">
<meta name="twitter:description" content="A modern Tailwind CSS study-abroad template for universities, international courses, destinations, applications, and student guidance.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="UniGlobe template preview">
<!-- Scripts & Styles -->
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#ff4d8d',
secondary: '#7ee09e',
accent: '#d896ff',
bgSoft: '#fdf6ed',
dark: '#1a1a1a'
},
fontFamily: {
sans: ['Plus Jakarta Sans', 'sans-serif'],
}
}
}
}
</script>
<style>
.hero-gradient {
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1541339907198-e08756ebafe3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
background-position: center;
}
.scroll-hide::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body class="bg-[#fcf9f4] text-dark font-sans overflow-x-hidden">
<!-- block:start stats -->
<section id="stats" class="py-16">
<div class="max-w-7xl mx-auto px-6">
<h2 class="text-3xl font-black text-center mb-12">Our Global Reach</h2>
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white p-8 rounded-3xl border border-gray-100 shadow-sm relative group overflow-hidden">
<div class="absolute top-4 right-6 text-gray-100 text-3xl font-black">01</div>
<div class="w-10 h-10 bg-bgSoft text-primary rounded-xl flex items-center justify-center mb-6"><i class="fa-solid fa-calendar"></i></div>
<div class="text-3xl font-black mb-1">16+</div>
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Years of Experience</p>
</div>
<div class="bg-white p-8 rounded-3xl border border-gray-100 shadow-sm relative group overflow-hidden">
<div class="absolute top-4 right-6 text-gray-100 text-3xl font-black">02</div>
<div class="w-10 h-10 bg-bgSoft text-primary rounded-xl flex items-center justify-center mb-6"><i class="fa-solid fa-building"></i></div>
<div class="text-3xl font-black mb-1">230+</div>
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">University Partners</p>
</div>
<div class="bg-white p-8 rounded-3xl border border-gray-100 shadow-sm relative group overflow-hidden">
<div class="absolute top-4 right-6 text-gray-100 text-3xl font-black">03</div>
<div class="w-10 h-10 bg-bgSoft text-primary rounded-xl flex items-center justify-center mb-6"><i class="fa-solid fa-users"></i></div>
<div class="text-3xl font-black mb-1">1600+</div>
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Students Guided</p>
</div>
<div class="bg-white p-8 rounded-3xl border border-gray-100 shadow-sm relative group overflow-hidden">
<div class="absolute top-4 right-6 text-gray-100 text-3xl font-black">04</div>
<div class="w-10 h-10 bg-bgSoft text-primary rounded-xl flex items-center justify-center mb-6"><i class="fa-solid fa-book-open"></i></div>
<div class="text-3xl font-black mb-1">180+</div>
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Courses Provided</p>
</div>
</div>
</div>
</section>
<!-- block:end stats -->
</body>
</html>
From this template
Free
Education
UniGlobe
Unlimited access to all products
Unlock the entire library of premium templates and blocks. Renews automatically, cancel anytime.
€20
/ 3 months
or €60 / year
Get Unlimited Access