Free
Features
Nexus Features
A features block extracted from the Nexus template, available in Tailwind CSS, Bootstrap, DaisyUI, and Material Design.
0
9
nexus.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>Nexus Features | Tailwind CSS UI Block</title>
<meta name="description" content="A features block extracted from the Nexus template, available in Tailwind CSS, Bootstrap, DaisyUI, and Material Design.">
<meta name="keywords" content="Nexus, Tailwind CSS template, HTML website template, product designer portfolio, UX designer website, creative portfolio, responsive personal design">
<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="Nexus | Tailwind CSS Product Designer Portfolio Template">
<meta property="og:description" content="A clean Tailwind CSS portfolio template for product designers, experience architects, and digital creatives showcasing services, work, and contact.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="Nexus template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="Nexus | Tailwind CSS Product Designer Portfolio Template">
<meta name="twitter:description" content="A clean Tailwind CSS portfolio template for product designers, experience architects, and digital creatives showcasing services, work, and contact.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="Nexus template preview">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #ffffff;
color: #1a1a1a;
}
.text-huge {
font-size: clamp(3rem, 10vw, 8rem);
line-height: 0.9;
}
.logo-scroll {
display: flex;
overflow: hidden;
user-select: none;
gap: 2rem;
}
.logo-scroll-inner {
display: flex;
flex-shrink: 0;
gap: 2rem;
min-width: 100%;
animation: scroll 30s linear infinite;
}
@keyframes scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
</style>
</head>
<body class="antialiased">
<!-- block:start features -->
<section id="services" class="py-32 bg-neutral-50 px-6 md:px-12">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 mb-20">
<div class="lg:col-span-5">
<span class="inline-block px-4 py-1 bg-white rounded-full text-[10px] uppercase font-bold tracking-widest mb-6">Expertise</span>
<h2 class="text-4xl md:text-5xl font-bold tracking-tighter leading-tight mb-8">
Comprehensive solutions for digital ecosystems.
</h2>
<p class="text-neutral-500 max-w-sm mb-10">From initial strategy to final interaction, I help brands bridge the gap between vision and reality.</p>
<a href="#contact" class="inline-flex items-center px-8 py-4 bg-black text-white rounded-full text-sm font-bold hover:bg-neutral-800 transition-all">
Work with me
</a>
</div>
<div class="lg:col-span-7 grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Service 1 -->
<div class="bg-white p-10 rounded-[2rem] shadow-sm hover:shadow-xl transition-shadow border border-neutral-100 flex flex-col justify-between">
<div>
<h3 class="text-xl font-bold mb-4">Product Strategy</h3>
<p class="text-sm text-neutral-500 leading-relaxed">Defining clear roadmaps and value propositions for complex digital products.</p>
</div>
<div class="mt-8 flex justify-end">
<div class="w-10 h-10 rounded-full border border-neutral-100 flex items-center justify-center">
<i class="fa-solid fa-arrow-right text-xs"></i>
</div>
</div>
</div>
<!-- Service 2 -->
<div class="bg-white p-10 rounded-[2rem] shadow-sm hover:shadow-xl transition-shadow border border-neutral-100 flex flex-col justify-between">
<div>
<h3 class="text-xl font-bold mb-4">UX Architecture</h3>
<p class="text-sm text-neutral-500 leading-relaxed">Designing intuitive user flows and information structures that feel natural.</p>
</div>
<div class="mt-8 flex justify-end">
<div class="w-10 h-10 rounded-full border border-neutral-100 flex items-center justify-center">
<i class="fa-solid fa-arrow-right text-xs"></i>
</div>
</div>
</div>
<!-- Service 3 (Featured) -->
<div class="bg-black text-white p-10 rounded-[2rem] shadow-xl md:col-span-2 relative overflow-hidden group">
<div class="relative z-10 flex flex-col md:flex-row md:items-center justify-between h-full">
<div class="max-w-md">
<h3 class="text-2xl font-bold mb-4">Design Systems</h3>
<p class="text-sm text-neutral-300 leading-relaxed">Building scalable, consistent component libraries that empower development teams and ensure brand coherence.</p>
</div>
<div class="mt-8 md:mt-0 flex items-center space-x-4">
<i class="fa-solid fa-mouse-pointer text-white/20 text-4xl"></i>
<div class="w-12 h-12 rounded-full bg-white text-black flex items-center justify-center">
<i class="fa-solid fa-arrow-up-right-from-square text-sm"></i>
</div>
</div>
</div>
<div class="absolute -bottom-10 -right-10 opacity-10 group-hover:scale-110 transition-transform">
<i class="fa-solid fa-cubes text-[15rem]"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- block:end features -->
</body>
</html>
From this template
Free
Portfolio
Nexus
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