Modern Website UI Design with HTML & Tailwind CSS in Vue JS | Responsive Navbar, Hero, About Us & Footer
By Ved Prakash N |
Jul 21, 2026 |
General
Below is a modern blog website layout that is clean, responsive, and looks professional. It uses Tailwind CSS only and follows a minimal design similar to Medium, Hashnode, and Dev.to.
Navbar
<nav class="bg-white border-b border-gray-200 sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-6">
<div class="flex items-center justify-between h-16">
<!-- Logo -->
<a href="#" class="text-2xl font-bold text-indigo-600">
BlogSpace
</a>
<!-- Desktop Menu -->
<div class="hidden md:flex items-center space-x-8">
<a href="#" class="text-gray-700 hover:text-indigo-600 transition">Home</a>
<a href="#" class="text-gray-700 hover:text-indigo-600 transition">Blogs</a>
<a href="#" class="text-gray-700 hover:text-indigo-600 transition">Categories</a>
<a href="#" class="text-gray-700 hover:text-indigo-600 transition">About</a>
<a href="#" class="text-gray-700 hover:text-indigo-600 transition">Contact</a>
</div>
<!-- Buttons -->
<div class="hidden md:flex items-center gap-3">
<button class="px-5 py-2 rounded-lg text-indigo-600 border border-indigo-600 hover:bg-indigo-50">
Login
</button>
<button class="px-5 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700">
Get Started
</button>
</div>
<!-- Mobile Button -->
<button class="md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
</div>
</nav>
Hero section
<section class="bg-gradient-to-br from-indigo-50 via-white to-purple-50">
<div class="max-w-7xl mx-auto px-6 py-24">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<!-- Left -->
<div>
<span class="inline-block px-4 py-2 bg-indigo-100 text-indigo-600 rounded-full text-sm font-medium">
✨ Welcome to BlogSpace
</span>
<h1 class="mt-6 text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
Discover Stories,
<span class="text-indigo-600">
Ideas &
</span>
Inspiration.
</h1>
<p class="mt-6 text-lg text-gray-600 leading-relaxed">
Read insightful blogs, explore trending topics, and share
your own experiences with a growing community of writers.
</p>
<div class="mt-8 flex flex-wrap gap-4">
<button class="bg-indigo-600 text-white px-8 py-3 rounded-lg hover:bg-indigo-700">
Explore Blogs
</button>
<button class="border border-gray-300 px-8 py-3 rounded-lg hover:bg-gray-100">
Become a Writer
</button>
</div>
</div>
<!-- Right -->
<div class="flex justify-center">
<img
src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=700"
class="rounded-2xl shadow-2xl"
alt="Hero">
</div>
</div>
</div>
</section>
About Us Section
<section class="py-24 bg-white">
<div class="max-w-7xl mx-auto px-6">
<div class="grid lg:grid-cols-2 gap-16 items-center">
<!-- Image -->
<div>
<img
src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=700"
class="rounded-2xl shadow-xl"
alt="About">
</div>
<!-- Content -->
<div>
<span class="text-indigo-600 font-semibold uppercase tracking-widest">
About Us
</span>
<h2 class="mt-3 text-4xl font-bold text-gray-900">
A Place Where Ideas Meet People
</h2>
<p class="mt-6 text-gray-600 leading-8">
BlogSpace is a modern blogging platform where passionate
writers and curious readers come together. We believe
everyone has a story worth sharing.
</p>
<p class="mt-5 text-gray-600 leading-8">
Whether you're writing about technology, travel,
programming, lifestyle, or personal experiences, our
platform gives you the tools to reach thousands of readers.
</p>
<div class="grid grid-cols-2 gap-6 mt-10">
<div class="p-6 bg-gray-50 rounded-xl">
<h3 class="text-3xl font-bold text-indigo-600">
10K+
</h3>
<p class="text-gray-600 mt-2">
Monthly Readers
</p>
</div>
<div class="p-6 bg-gray-50 rounded-xl">
<h3 class="text-3xl font-bold text-indigo-600">
5K+
</h3>
<p class="text-gray-600 mt-2">
Published Blogs
</p>
</div>
</div>
</div>
</div>
</div>
</section>
Footer
<footer class="bg-gray-900 text-gray-300">
<div class="max-w-7xl mx-auto px-6 py-16">
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-10">
<!-- Logo -->
<div>
<h2 class="text-3xl font-bold text-white">
BlogSpace
</h2>
<p class="mt-5 text-gray-400 leading-7">
Discover inspiring stories, share your knowledge,
and connect with readers from around the world.
</p>
</div>
<!-- Links -->
<div>
<h3 class="text-white font-semibold mb-5">
Quick Links
</h3>
<ul class="space-y-3">
<li><a href="#" class="hover:text-white">Home</a></li>
<li><a href="#" class="hover:text-white">Blogs</a></li>
<li><a href="#" class="hover:text-white">Categories</a></li>
<li><a href="#" class="hover:text-white">About</a></li>
</ul>
</div>
<!-- Resources -->
<div>
<h3 class="text-white font-semibold mb-5">
Resources
</h3>
<ul class="space-y-3">
<li><a href="#" class="hover:text-white">Privacy Policy</a></li>
<li><a href="#" class="hover:text-white">Terms</a></li>
<li><a href="#" class="hover:text-white">Help Center</a></li>
<li><a href="#" class="hover:text-white">FAQ</a></li>
</ul>
</div>
<!-- Newsletter -->
<div>
<h3 class="text-white font-semibold mb-5">
Newsletter
</h3>
<p class="text-gray-400 mb-5">
Subscribe to receive our latest articles.
</p>
<div class="flex">
<input
type="email"
placeholder="Email address"
class="w-full rounded-l-lg px-4 py-3 text-black outline-none">
<button class="bg-indigo-600 px-5 rounded-r-lg hover:bg-indigo-700">
Join
</button>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400">
© 2026 BlogSpace. All Rights Reserved.
</p>
<div class="flex gap-6 mt-5 md:mt-0">
<a href="#" class="hover:text-white">Facebook</a>
<a href="#" class="hover:text-white">Twitter</a>
<a href="#" class="hover:text-white">LinkedIn</a>
<a href="#" class="hover:text-white">GitHub</a>
</div>
</div>
</div>
</footer>
That's it.