Free
Blog
UniGlobe Blog
A blog block extracted from the UniGlobe template, available in Tailwind CSS, Bootstrap, DaisyUI, and Material Design.
0
23
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 Blog | Tailwind CSS UI Block</title>
<meta name="description" content="A blog 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 blog -->
<section id="blog" class="py-24">
<div class="max-w-7xl mx-auto px-6">
<div class="flex justify-between items-end mb-16">
<div>
<h2 class="text-3xl font-black mb-3">Insights for Global Students <i class="fa-solid fa-newspaper text-primary"></i></h2>
<p class="text-gray-500 text-sm font-medium">Expert tips, destination guides, and student experiences.</p>
</div>
<a href="#" class="text-xs font-black uppercase tracking-widest text-primary border-b border-primary pb-1">Read All <i class="fa-solid fa-arrow-right ml-1"></i></a>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Blog 1 -->
<div class="bg-white rounded-[2.5rem] p-4 shadow-sm border border-gray-100 group cursor-pointer hover:shadow-xl transition">
<div class="h-48 bg-yellow-400 rounded-3xl overflow-hidden mb-6 relative">
<img class="w-full h-full object-contain p-4 group-hover:scale-110 transition duration-500" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_f86bfee294_494b43553dd23772.png" alt="3D illustration of a graduation cap and diploma, educational concept, bright yellow background" />
<div class="absolute bottom-4 left-4 bg-white/20 backdrop-blur-md px-3 py-1 rounded-full text-[9px] font-black text-white uppercase tracking-widest">Scholarships</div>
</div>
<span class="text-[9px] font-black text-primary uppercase tracking-widest mb-2 block">Study in Australia</span>
<h4 class="font-extrabold text-sm mb-6 leading-tight">Mastering Scholarship Applications for 2025</h4>
<p class="text-[10px] text-gray-400 font-bold flex items-center gap-2"><i class="fa-solid fa-calendar"></i> 17 March 2024</p>
</div>
<!-- Blog 2 -->
<div class="bg-white rounded-[2.5rem] p-4 shadow-sm border border-gray-100 group cursor-pointer hover:shadow-xl transition">
<div class="h-48 bg-secondary rounded-3xl overflow-hidden mb-6 relative">
<img class="w-full h-full object-contain p-4 group-hover:scale-110 transition duration-500" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_119fd8b83c_221e3ef7d6fdacf7.png" alt="3D illustration of a globe and passport, travel concept, bright green background" />
<div class="absolute bottom-4 left-4 bg-white/20 backdrop-blur-md px-3 py-1 rounded-full text-[9px] font-black text-white uppercase tracking-widest">Visa Tips</div>
</div>
<span class="text-[9px] font-black text-primary uppercase tracking-widest mb-2 block">Study in Europe</span>
<h4 class="font-extrabold text-sm mb-6 leading-tight">Navigating Student Visas Across the EU</h4>
<p class="text-[10px] text-gray-400 font-bold flex items-center gap-2"><i class="fa-solid fa-calendar"></i> 15 March 2024</p>
</div>
<!-- Blog 3 -->
<div class="bg-white rounded-[2.5rem] p-4 shadow-sm border border-gray-100 group cursor-pointer hover:shadow-xl transition">
<div class="h-48 bg-primary rounded-3xl overflow-hidden mb-6 relative">
<img class="w-full h-full object-contain p-4 group-hover:scale-110 transition duration-500" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_6f25894e08_3f0adc03e043f1ba.png" alt="3D illustration of a stack of books and pencil, learning concept, bright pink background" />
<div class="absolute bottom-4 left-4 bg-white/20 backdrop-blur-md px-3 py-1 rounded-full text-[9px] font-black text-white uppercase tracking-widest">Guide</div>
</div>
<span class="text-[9px] font-black text-primary uppercase tracking-widest mb-2 block">Study in USA</span>
<h4 class="font-extrabold text-sm mb-6 leading-tight">Top US Universities for STEM Degrees</h4>
<p class="text-[10px] text-gray-400 font-bold flex items-center gap-2"><i class="fa-solid fa-calendar"></i> 12 March 2024</p>
</div>
<!-- Blog 4 -->
<div class="bg-white rounded-[2.5rem] p-4 shadow-sm border border-gray-100 group cursor-pointer hover:shadow-xl transition">
<div class="h-48 bg-accent rounded-3xl overflow-hidden mb-6 relative">
<img class="w-full h-full object-contain p-4 group-hover:scale-110 transition duration-500" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_9ef1607cb1_07fa84f8598c0083.png" alt="3D illustration of a lightbulb and gear, innovation concept, bright purple background" />
<div class="absolute bottom-4 left-4 bg-white/20 backdrop-blur-md px-3 py-1 rounded-full text-[9px] font-black text-white uppercase tracking-widest">Career</div>
</div>
<span class="text-[9px] font-black text-primary uppercase tracking-widest mb-2 block">Global Insights</span>
<h4 class="font-extrabold text-sm mb-6 leading-tight">Future-Proofing Your Career with an MBA</h4>
<p class="text-[10px] text-gray-400 font-bold flex items-center gap-2"><i class="fa-solid fa-calendar"></i> 10 March 2024</p>
</div>
</div>
</div>
</section>
<!-- block:end blog -->
</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