Phong Cách UI Hiện Đại 2025: Hướng Dẫn với Ví Dụ và Code HTML Thực Tế
Phong cách thiết kế mang lại cảm giác hiện đại , thậm chí tương lai
- Bạn luôn tự hỏi hoặc nhận thấy các dev khác làm giao diện đẹp và đặt sắc hơn mình ? Đừng lo bài viết này sẽ mang đến cho bạn những từ khóa gợi mở cho bạn
- Bản thân mình đi lên từ backend làm giao diện khá xấu , nhưng nhờ có tailwind và các chatbot AI : như Gemini, Tabnine, Github Copilot gần đây mình có dùng con V0.dev và Deepseek v3 thì việc thiết kế xấu chỉ còn là ngụy biện
- Dev Backend chúng ta sẽ không còn mang tiếng không thể làm UI hoặc làm UI xấu nữa. Đương nhiên tôi biết tôi đang nói gì anh em ạ , mình sẽ đẹp theo một chuẩn nào đó còn mượt mà hoặc "art" thì không dễ rồi !
- Oke dưới đây sẽ là một số từ khóa , phong cách thiết kế mà mình có thể nghiên cứu áp dụng
Soft Gradient
- Gradient mềm mại, tạo cảm giác nhẹ nhàng và hiện đại.
- Gradient chuyển màu mượt mà, nhẹ nhàng, áp dụng cho chữ và nền.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hero Section</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(to bottom, #f3f4f6, #e5e7eb);
}
.soft-gradient {
background: linear-gradient(135deg, #6ee7b7, #3b82f6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.neumorphism {
box-shadow: 10px 10px 30px #d1d5db, -10px -10px 30px #ffffff;
}
</style>
</head>
<body class="text-gray-900">
<section class="relative flex flex-col md:flex-row items-center justify-between max-w-7xl mx-auto p-8 bg-white rounded-lg shadow-md">
<!-- Text Section -->
<div class="md:w-1/2">
<h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight text-gray-900">
Ghế Lento Lounge Nest
</h1>
<p class="text-lg md:text-xl text-gray-600 mb-6 leading-relaxed">
Với thiết kế cong mềm mại, ghế Lento Lounge mang lại sự hỗ trợ tối ưu và phong cách hiện đại, hoàn hảo cho mọi không gian sống.
</p>
<div class="flex space-x-4">
<a href="#" class="px-6 py-3 bg-gray-900 text-white font-medium rounded-lg shadow hover:bg-gray-800 transition">Thêm vào giỏ hàng</a>
<a href="#" class="px-6 py-3 bg-gray-100 text-gray-900 font-medium rounded-lg shadow hover:bg-gray-200 transition">Tìm hiểu thêm</a>
</div>
</div>
<!-- Image Section -->
<div class="relative md:w-1/2 flex items-center justify-center mt-8 md:mt-0">
<div class="relative">
<img src="https://robohash.org/lento-chair" alt="Ghế Lento" class="rounded-lg shadow-md">
<div class="absolute top-4 left-4 bg-white p-4 rounded-lg neumorphism">
<p class="text-sm font-medium text-gray-600">Chất liệu</p>
<p class="text-xl font-semibold text-gray-900">Vải nhung mềm</p>
</div>
<div class="absolute bottom-4 right-4 bg-white p-4 rounded-lg neumorphism">
<p class="text-sm font-medium text-gray-600">Chân ghế</p>
<p class="text-xl font-semibold text-gray-900">Gỗ sồi nguyên khối</p>
</div>
</div>
</div>
</section>
<!-- Feature Section -->
<div class="mt-8 max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
<div class="p-4 bg-white rounded-lg shadow-md neumorphism">
<p class="text-xl font-bold text-gray-900">2.5k+</p>
<p class="text-sm text-gray-600">Ghế đã bán</p>
</div>
<div class="p-4 bg-white rounded-lg shadow-md neumorphism">
<p class="text-xl font-bold text-gray-900">98%</p>
<p class="text-sm text-gray-600">Khách hàng hài lòng</p>
</div>
<div class="p-4 bg-white rounded-lg shadow-md neumorphism">
<p class="text-xl font-bold text-gray-900">1.2k</p>
<p class="text-sm text-gray-600">Đánh giá 5 sao</p>
</div>
<div class="p-4 bg-white rounded-lg shadow-md neumorphism">
<p class="text-xl font-bold text-gray-900">10 năm</p>
<p class="text-sm text-gray-600">Bảo hành</p>
</div>
</div>
</body>
</html>
Glassmorphism
- Hiệu ứng kính mờ, kết hợp với ánh sáng gradient và đường viền mỏng.
- Nền bán trong suốt, bóng mờ (blur), đường viền mỏng và sáng.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hero Section</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(243, 244, 246, 1));
}
.glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body class="text-gray-900">
<section class="relative flex flex-col md:flex-row items-center justify-between max-w-7xl mx-auto p-8 glass rounded-lg">
<!-- Text Section -->
<div class="md:w-1/2">
<h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight text-gray-900">
Ghế Lento Lounge Nest
</h1>
<p class="text-lg md:text-xl text-gray-600 mb-6 leading-relaxed">
Với thiết kế cong mềm mại, ghế Lento Lounge mang lại sự hỗ trợ tối ưu và phong cách hiện đại, hoàn hảo cho mọi không gian sống.
</p>
<div class="flex space-x-4">
<a href="#" class="px-6 py-3 bg-gray-900 text-white font-medium rounded-lg shadow hover:bg-gray-800 transition">Thêm vào giỏ hàng</a>
<a href="#" class="px-6 py-3 bg-gray-100 text-gray-900 font-medium rounded-lg shadow hover:bg-gray-200 transition">Tìm hiểu thêm</a>
</div>
</div>
<!-- Image Section -->
<div class="relative md:w-1/2 flex items-center justify-center mt-8 md:mt-0">
<div class="relative">
<img src="https://robohash.org/lento-chair" alt="Ghế Lento" class="rounded-lg shadow-md">
<div class="absolute top-4 left-4 glass p-4 rounded-lg">
<p class="text-sm font-medium text-gray-600">Chất liệu</p>
<p class="text-xl font-semibold text-gray-900">Vải nhung mềm</p>
</div>
<div class="absolute bottom-4 right-4 glass p-4 rounded-lg">
<p class="text-sm font-medium text-gray-600">Chân ghế</p>
<p class="text-xl font-semibold text-gray-900">Gỗ sồi nguyên khối</p>
</div>
</div>
</div>
</section>
<!-- Feature Section -->
<div class="mt-8 max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
<div class="p-4 glass rounded-lg">
<p class="text-xl font-bold text-gray-900">2.5k+</p>
<p class="text-sm text-gray-600">Ghế đã bán</p>
</div>
<div class="p-4 glass rounded-lg">
<p class="text-xl font-bold text-gray-900">98%</p>
<p class="text-sm text-gray-600">Khách hàng hài lòng</p>
</div>
<div class="p-4 glass rounded-lg">
<p class="text-xl font-bold text-gray-900">1.2k</p>
<p class="text-sm text-gray-600">Đánh giá 5 sao</p>
</div>
<div class="p-4 glass rounded-lg">
<p class="text-xl font-bold text-gray-900">10 năm</p>
<p class="text-sm text-gray-600">Bảo hành</p>
</div>
</div>
</body>
</html>
Neumorphism
- Tạo cảm giác nổi và lõm với các bóng sáng và tối.
- Kết hợp bóng sáng và tối, sử dụng màu trung tính để tạo chiều sâu.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hero Section</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Roboto', sans-serif;
background: #e0e0e0;
}
.neumorphism {
background: #e0e0e0;
border-radius: 12px;
box-shadow: 10px 10px 30px #bebebe, -10px -10px 30px #ffffff;
}
.neumorphism-btn {
background: #e0e0e0;
border-radius: 12px;
box-shadow: 5px 5px 15px #bebebe, -5px -5px 15px #ffffff;
transition: all 0.2s ease-in-out;
}
.neumorphism-btn:hover {
box-shadow: inset 5px 5px 15px #bebebe, inset -5px -5px 15px #ffffff;
}
</style>
</head>
<body class="text-gray-900">
<section class="relative flex flex-col md:flex-row items-center justify-between max-w-7xl mx-auto p-8 neumorphism">
<!-- Text Section -->
<div class="md:w-1/2">
<h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight text-gray-900">
Ghế Lento Lounge Nest
</h1>
<p class="text-lg md:text-xl text-gray-600 mb-6 leading-relaxed">
Với thiết kế cong mềm mại, ghế Lento Lounge mang lại sự hỗ trợ tối ưu và phong cách hiện đại, hoàn hảo cho mọi không gian sống.
</p>
<div class="flex space-x-4">
<a href="#" class="px-6 py-3 neumorphism-btn text-gray-900 font-medium">Thêm vào giỏ hàng</a>
<a href="#" class="px-6 py-3 neumorphism-btn text-gray-900 font-medium">Tìm hiểu thêm</a>
</div>
</div>
<!-- Image Section -->
<div class="relative md:w-1/2 flex items-center justify-center mt-8 md:mt-0">
<div class="relative">
<img src="https://robohash.org/lento-chair" alt="Ghế Lento" class="rounded-lg shadow-md">
<div class="absolute top-4 left-4 p-4 neumorphism">
<p class="text-sm font-medium text-gray-600">Chất liệu</p>
<p class="text-xl font-semibold text-gray-900">Vải nhung mềm</p>
</div>
<div class="absolute bottom-4 right-4 p-4 neumorphism">
<p class="text-sm font-medium text-gray-600">Chân ghế</p>
<p class="text-xl font-semibold text-gray-900">Gỗ sồi nguyên khối</p>
</div>
</div>
</div>
</section>
<!-- Feature Section -->
<div class="mt-8 max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
<div class="p-4 neumorphism">
<p class="text-xl font-bold text-gray-900">2.5k+</p>
<p class="text-sm text-gray-600">Ghế đã bán</p>
</div>
<div class="p-4 neumorphism">
<p class="text-xl font-bold text-gray-900">98%</p>
<p class="text-sm text-gray-600">Khách hàng hài lòng</p>
</div>
<div class="p-4 neumorphism">
<p class="text-xl font-bold text-gray-900">1.2k</p>
<p class="text-sm text-gray-600">Đánh giá 5 sao</p>
</div>
<div class="p-4 neumorphism">
<p class="text-xl font-bold text-gray-900">10 năm</p>
<p class="text-sm text-gray-600">Bảo hành</p>
</div>
</div>
</body>
</html>
Dark Mode with Vibrant Accents
- Nền tối kết hợp với màu neon hoặc gradient nổi bật.
- Màu nền tối, điểm nhấn là các yếu tố rực rỡ, thường sử dụng màu neon hoặc gradient sáng.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hero Section</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Roboto', sans-serif;
background: #121212;
}
.dark-card {
background: #1E1E1E;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.vibrant-text {
background: linear-gradient(90deg, #ff7eb3, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.vibrant-btn {
background: linear-gradient(90deg, #3b82f6, #06b6d4);
color: #ffffff;
border-radius: 8px;
padding: 0.75rem 1.5rem;
font-weight: bold;
transition: transform 0.2s;
}
.vibrant-btn:hover {
transform: scale(1.05);
background: linear-gradient(90deg, #2563eb, #0891b2);
}
</style>
</head>
<body class="text-gray-100">
<section class="relative flex flex-col md:flex-row items-center justify-between max-w-7xl mx-auto p-8">
<!-- Text Section -->
<div class="md:w-1/2">
<h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight vibrant-text">
Ghế Lento Lounge Nest
</h1>
<p class="text-lg md:text-xl text-gray-400 mb-6 leading-relaxed">
Với thiết kế cong mềm mại, ghế Lento Lounge mang lại sự hỗ trợ tối ưu và phong cách hiện đại, hoàn hảo cho mọi không gian sống.
</p>
<div class="flex space-x-4">
<a href="#" class="vibrant-btn">Thêm vào giỏ hàng</a>
<a href="#" class="vibrant-btn" style="background: #8b5cf6;">Tìm hiểu thêm</a>
</div>
</div>
<!-- Image Section -->
<div class="relative md:w-1/2 flex items-center justify-center mt-8 md:mt-0">
<div class="relative">
<img src="https://robohash.org/lento-chair" alt="Ghế Lento" class="rounded-lg shadow-md">
<div class="absolute top-4 left-4 p-4 dark-card">
<p class="text-sm font-medium text-gray-400">Chất liệu</p>
<p class="text-xl font-semibold text-gray-100">Vải nhung mềm</p>
</div>
<div class="absolute bottom-4 right-4 p-4 dark-card">
<p class="text-sm font-medium text-gray-400">Chân ghế</p>
<p class="text-xl font-semibold text-gray-100">Gỗ sồi nguyên khối</p>
</div>
</div>
</div>
</section>
<!-- Feature Section -->
<div class="mt-8 max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
<div class="p-4 dark-card">
<p class="text-xl font-bold text-gray-100">2.5k+</p>
<p class="text-sm text-gray-400">Ghế đã bán</p>
</div>
<div class="p-4 dark-card">
<p class="text-xl font-bold text-gray-100">98%</p>
<p class="text-sm text-gray-400">Khách hàng hài lòng</p>
</div>
<div class="p-4 dark-card">
<p class="text-xl font-bold text-gray-100">1.2k</p>
<p class="text-sm text-gray-400">Đánh giá 5 sao</p>
</div>
<div class="p-4 dark-card">
<p class="text-xl font-bold text-gray-100">10 năm</p>
<p class="text-sm text-gray-400">Bảo hành</p>
</div>
</div>
</body>
</html>
Minimalism with Depth
- Tối giản nhưng vẫn tạo chiều sâu bằng bóng nhẹ và sự căn chỉnh tinh tế.
- Bóng nhẹ nhàng, ít chi tiết, tập trung vào nội dung chính.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hero Section</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Roboto', sans-serif;
background: #f9f9f9;
}
.minimal-card {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.2s, box-shadow 0.2s;
}
.minimal-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
</style>
</head>
<body class="text-gray-900">
<section class="relative flex flex-col md:flex-row items-center justify-between max-w-7xl mx-auto p-8">
<!-- Text Section -->
<div class="md:w-1/2">
<h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight">
Ghế Lento Lounge Nest
</h1>
<p class="text-lg md:text-xl text-gray-600 mb-6 leading-relaxed">
Với thiết kế cong mềm mại, ghế Lento Lounge mang lại sự hỗ trợ tối ưu và phong cách hiện đại, hoàn hảo cho mọi không gian sống.
</p>
<div class="flex space-x-4">
<a href="#" class="px-6 py-3 bg-gray-900 text-white font-medium rounded-lg shadow hover:bg-gray-800 transition">Thêm vào giỏ hàng</a>
<a href="#" class="px-6 py-3 bg-gray-100 text-gray-900 font-medium rounded-lg shadow hover:bg-gray-200 transition">Tìm hiểu thêm</a>
</div>
</div>
<!-- Image Section -->
<div class="relative md:w-1/2 flex items-center justify-center mt-8 md:mt-0">
<div class="relative minimal-card p-4">
<img src="https://robohash.org/lento-chair" alt="Ghế Lento" class="rounded-lg shadow-md">
<div class="absolute top-4 left-4 p-4 minimal-card">
<p class="text-sm font-medium text-gray-600">Chất liệu</p>
<p class="text-xl font-semibold text-gray-900">Vải nhung mềm</p>
</div>
<div class="absolute bottom-4 right-4 p-4 minimal-card">
<p class="text-sm font-medium text-gray-600">Chân ghế</p>
<p class="text-xl font-semibold text-gray-900">Gỗ sồi nguyên khối</p>
</div>
</div>
</div>
</section>
<!-- Feature Section -->
<div class="mt-8 max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
<div class="p-4 minimal-card">
<p class="text-xl font-bold text-gray-900">2.5k+</p>
<p class="text-sm text-gray-600">Ghế đã bán</p>
</div>
<div class="p-4 minimal-card">
<p class="text-xl font-bold text-gray-900">98%</p>
<p class="text-sm text-gray-600">Khách hàng hài lòng</p>
</div>
<div class="p-4 minimal-card">
<p class="text-xl font-bold text-gray-900">1.2k</p>
<p class="text-sm text-gray-600">Đánh giá 5 sao</p>
</div>
<div class="p-4 minimal-card">
<p class="text-xl font-bold text-gray-900">10 năm</p>
<p class="text-sm text-gray-600">Bảo hành</p>
</div>
</div>
</body>
</html>
3D Elements and Motion
- Kết hợp đồ họa 3D cùng hiệu ứng chuyển động mượt mà.
- Đồ họa 3D, hiệu ứng hover, cuộn hoặc chuyển động nổi bật các yếu tố trên giao diện.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hero Section</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(to bottom, #e0e0e0, #f9f9f9);
perspective: 1000px;
}
.card-3d {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transform-style: preserve-3d;
transition: transform 0.6s ease-in-out, box-shadow 0.3s ease;
}
.card-3d:hover {
transform: rotateY(15deg) rotateX(-5deg);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body class="text-gray-900">
<section class="relative flex flex-col md:flex-row items-center justify-between max-w-7xl mx-auto p-8">
<!-- Text Section -->
<div class="md:w-1/2">
<h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight">
Ghế Lento Lounge Nest
</h1>
<p class="text-lg md:text-xl text-gray-600 mb-6 leading-relaxed">
Với thiết kế cong mềm mại, ghế Lento Lounge mang lại sự hỗ trợ tối ưu và phong cách hiện đại, hoàn hảo cho mọi không gian sống.
</p>
<div class="flex space-x-4">
<a href="#" class="px-6 py-3 bg-gray-900 text-white font-medium rounded-lg shadow hover:bg-gray-800 transition">Thêm vào giỏ hàng</a>
<a href="#" class="px-6 py-3 bg-gray-100 text-gray-900 font-medium rounded-lg shadow hover:bg-gray-200 transition">Tìm hiểu thêm</a>
</div>
</div>
<!-- Image Section -->
<div class="relative md:w-1/2 flex items-center justify-center mt-8 md:mt-0">
<div class="relative card-3d p-4">
<img src="https://robohash.org/lento-chair" alt="Ghế Lento" class="rounded-lg shadow-md">
<div class="absolute top-4 left-4 p-4 card-3d">
<p class="text-sm font-medium text-gray-600">Chất liệu</p>
<p class="text-xl font-semibold text-gray-900">Vải nhung mềm</p>
</div>
<div class="absolute bottom-4 right-4 p-4 card-3d">
<p class="text-sm font-medium text-gray-600">Chân ghế</p>
<p class="text-xl font-semibold text-gray-900">Gỗ sồi nguyên khối</p>
</div>
</div>
</div>
</section>
<!-- Feature Section -->
<div class="mt-8 max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
<div class="p-4 card-3d">
<p class="text-xl font-bold text-gray-900">2.5k+</p>
<p class="text-sm text-gray-600">Ghế đã bán</p>
</div>
<div class="p-4 card-3d">
<p class="text-xl font-bold text-gray-900">98%</p>
<p class="text-sm text-gray-600">Khách hàng hài lòng</p>
</div>
<div class="p-4 card-3d">
<p class="text-xl font-bold text-gray-900">1.2k</p>
<p class="text-sm text-gray-600">Đánh giá 5 sao</p>
</div>
<div class="p-4 card-3d">
<p class="text-xl font-bold text-gray-900">10 năm</p>
<p class="text-sm text-gray-600">Bảo hành</p>
</div>
</div>
</body>
</html>
Dynamic Gradients with Particles
- Gradient động và hiệu ứng hạt (particles.js), tạo cảm giác sống động.
- Nền gradient chuyển động, kết hợp với các hạt như sao, bọt khí hoặc chấm nhỏ di chuyển.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hero Section</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(120deg, #89f7fe, #66a6ff);
overflow: hidden;
position: relative;
}
.gradient-text {
background: linear-gradient(90deg, #ff9a9e, #fad0c4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.particle {
position: absolute;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
animation: move 10s infinite ease-in-out;
}
@keyframes move {
0% {
transform: translateY(0) translateX(0);
}
50% {
transform: translateY(-20px) translateX(10px);
}
100% {
transform: translateY(0) translateX(0);
}
}
</style>
</head>
<body class="text-gray-900">
<div class="particle" style="width: 50px; height: 50px; top: 20%; left: 10%;"></div>
<div class="particle" style="width: 80px; height: 80px; top: 40%; left: 70%;"></div>
<div class="particle" style="width: 30px; height: 30px; top: 60%; left: 50%;"></div>
<section class="relative flex flex-col md:flex-row items-center justify-between max-w-7xl mx-auto p-8">
<!-- Text Section -->
<div class="md:w-1/2">
<h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight gradient-text">
Ghế Lento Lounge Nest
</h1>
<p class="text-lg md:text-xl text-gray-100 mb-6 leading-relaxed">
Với thiết kế cong mềm mại, ghế Lento Lounge mang lại sự hỗ trợ tối ưu và phong cách hiện đại, hoàn hảo cho mọi không gian sống.
</p>
<div class="flex space-x-4">
<a href="#" class="px-6 py-3 bg-gray-900 text-white font-medium rounded-lg shadow hover:bg-gray-800 transition">Thêm vào giỏ hàng</a>
<a href="#" class="px-6 py-3 bg-gray-100 text-gray-900 font-medium rounded-lg shadow hover:bg-gray-200 transition">Tìm hiểu thêm</a>
</div>
</div>
<!-- Image Section -->
<div class="relative md:w-1/2 flex items-center justify-center mt-8 md:mt-0">
<div class="relative p-4">
<img src="https://robohash.org/lento-chair" alt="Ghế Lento" class="rounded-lg shadow-md">
<div class="absolute top-4 left-4 p-4" style="background: rgba(255, 255, 255, 0.2); border-radius: 12px;">
<p class="text-sm font-medium text-gray-100">Chất liệu</p>
<p class="text-xl font-semibold text-gray-100">Vải nhung mềm</p>
</div>
<div class="absolute bottom-4 right-4 p-4" style="background: rgba(255, 255, 255, 0.2); border-radius: 12px;">
<p class="text-sm font-medium text-gray-100">Chân ghế</p>
<p class="text-xl font-semibold text-gray-100">Gỗ sồi nguyên khối</p>
</div>
</div>
</div>
</section>
<!-- Feature Section -->
<div class="mt-8 max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
<div class="p-4" style="background: rgba(255, 255, 255, 0.2); border-radius: 12px;">
<p class="text-xl font-bold text-gray-100">2.5k+</p>
<p class="text-sm text-gray-100">Ghế đã bán</p>
</div>
<div class="p-4" style="background: rgba(255, 255, 255, 0.2); border-radius: 12px;">
<p class="text-xl font-bold text-gray-100">98%</p>
<p class="text-sm text-gray-100">Khách hàng hài lòng</p>
</div>
<div class="p-4" style="background: rgba(255, 255, 255, 0.2); border-radius: 12px;">
<p class="text-xl font-bold text-gray-100">1.2k</p>
<p class="text-sm text-gray-100">Đánh giá 5 sao</p>
</div>
<div class="p-4" style="background: rgba(255, 255, 255, 0.2); border-radius: 12px;">
<p class="text-xl font-bold text-gray-100">10 năm</p>
<p class="text-sm text-gray-100">Bảo hành</p>
</div>
</div>
</body>
</html>
Futuristic Typography
- Font chữ hiện đại, nổi bật với hiệu ứng gradient hoặc phát sáng.
- Font như Roboto, Poppins, hoặc Inter. Hiệu ứng chữ gradient, ánh sáng hoặc chuyển động nhẹ.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hero Section</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Orbitron', sans-serif;
background: linear-gradient(120deg, #0f2027, #203a43, #2c5364);
color: #e0e0e0;
overflow: hidden;
position: relative;
}
.futuristic-text {
background: linear-gradient(90deg, #00c6ff, #0072ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: 'Orbitron', sans-serif;
letter-spacing: 2px;
text-transform: uppercase;
}
.glow-effect {
text-shadow: 0 0 8px rgba(0, 198, 255, 0.6), 0 0 16px rgba(0, 198, 255, 0.4);
}
.button-hover {
background: linear-gradient(90deg, #ff6a00, #ee0979);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: bold;
text-transform: uppercase;
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.button-hover:hover {
transform: scale(1.05);
box-shadow: 0 0 12px rgba(255, 105, 180, 0.6), 0 0 24px rgba(255, 105, 180, 0.4);
}
</style>
</head>
<body>
<section class="relative flex flex-col md:flex-row items-center justify-between max-w-7xl mx-auto p-8">
<!-- Text Section -->
<div class="md:w-1/2">
<h1 class="text-4xl md:text-5xl futuristic-text glow-effect mb-4 leading-tight">
Ghế Lento Lounge Nest
</h1>
<p class="text-lg md:text-xl text-gray-300 mb-6 leading-relaxed">
Với thiết kế cong mềm mại, ghế Lento Lounge mang lại sự hỗ trợ tối ưu và phong cách hiện đại, hoàn hảo cho mọi không gian sống.
</p>
<div class="flex space-x-4">
<a href="#" class="button-hover">Thêm vào giỏ hàng</a>
<a href="#" class="button-hover" style="background: linear-gradient(90deg, #00f260, #0575e6);">Tìm hiểu thêm</a>
</div>
</div>
<!-- Image Section -->
<div class="relative md:w-1/2 flex items-center justify-center mt-8 md:mt-0">
<div class="relative p-4">
<img src="https://robohash.org/lento-chair" alt="Ghế Lento" class="rounded-lg shadow-md">
<div class="absolute top-4 left-4 p-4" style="background: rgba(0, 0, 0, 0.5); border-radius: 12px;">
<p class="text-sm font-medium text-gray-300">Chất liệu</p>
<p class="text-xl font-semibold text-gray-100">Vải nhung mềm</p>
</div>
<div class="absolute bottom-4 right-4 p-4" style="background: rgba(0, 0, 0, 0.5); border-radius: 12px;">
<p class="text-sm font-medium text-gray-300">Chân ghế</p>
<p class="text-xl font-semibold text-gray-100">Gỗ sồi nguyên khối</p>
</div>
</div>
</div>
</section>
<!-- Feature Section -->
<div class="mt-8 max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
<div class="p-4" style="background: rgba(0, 0, 0, 0.5); border-radius: 12px;">
<p class="text-xl font-bold text-gray-100">2.5k+</p>
<p class="text-sm text-gray-300">Ghế đã bán</p>
</div>
<div class="p-4" style="background: rgba(0, 0, 0, 0.5); border-radius: 12px;">
<p class="text-xl font-bold text-gray-100">98%</p>
<p class="text-sm text-gray-300">Khách hàng hài lòng</p>
</div>
<div class="p-4" style="background: rgba(0, 0, 0, 0.5); border-radius: 12px;">
<p class="text-xl font-bold text-gray-100">1.2k</p>
<p class="text-sm text-gray-300">Đánh giá 5 sao</p>
</div>
<div class="p-4" style="background: rgba(0, 0, 0, 0.5); border-radius: 12px;">
<p class="text-xl font-bold text-gray-100">10 năm</p>
<p class="text-sm text-gray-300">Bảo hành</p>
</div>
</div>
</body>
</html>
All rights reserved
