ZenDesign Hero Hero Block - Let's templates
Unlock every premium block and template with All-Access from €20 / 3 months, cancel anytime. Get All-Access
All blocks
Free Hero

ZenDesign Hero

A hero block extracted from the ZenDesign template, available in Tailwind CSS, Bootstrap, DaisyUI, and Material Design.

0 17
Demo Download
ZenDesign Hero preview
zendesign.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>ZenDesign Hero | Tailwind CSS UI Block</title>
    <meta name="description" content="A hero block extracted from the ZenDesign template, available in Tailwind CSS, Bootstrap, DaisyUI, and Material Design.">
    <meta name="keywords" content="ZenDesign, Tailwind CSS template, HTML website template, designer marketplace template, creative agency landing page, portfolio website, responsive 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="ZenDesign | Tailwind CSS Designer Marketplace Template">
    <meta property="og:description" content="A refined Tailwind CSS designer marketplace template for showcasing creative talent, agencies, portfolios, and hiring services.">
    <meta property="og:image" content="">
    <meta property="og:image:alt" content="ZenDesign template preview">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="">
    <meta name="twitter:title" content="ZenDesign | Tailwind CSS Designer Marketplace Template">
    <meta name="twitter:description" content="A refined Tailwind CSS designer marketplace template for showcasing creative talent, agencies, portfolios, and hiring services.">
    <meta name="twitter:image" content="">
    <meta name="twitter:image:alt" content="ZenDesign template preview">
    <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">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap');

        body {
            font-family: 'Inter', sans-serif;
        }

        .font-serif {
            font-family: 'Source Serif 4', serif;
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>
<body class="bg-white text-[#0d0c22]">
<!-- block:start hero -->
    <section id="hero" class="pt-20 pb-16 text-center">
        <div class="container mx-auto px-4">
            <span class="inline-block bg-[#fff9e6] text-[#b38a00] px-4 py-1.5 rounded-full text-xs font-bold mb-8 border border-[#fff3cd]">
                A curated community of elite design talent.
            </span>
            <h1 class="font-serif text-5xl md:text-7xl font-bold mb-6 max-w-4xl mx-auto leading-tight">
                Connect with the world's most mindful designers.
            </h1>
            <p class="text-gray-600 text-lg md:text-xl mb-10 max-w-2xl mx-auto leading-relaxed">
                Discover exceptional creative professionals and agencies ready to bring your vision to life with precision and care.
            </p>
            <button class="bg-[#ffda79] text-[#0d0c22] px-10 py-4 rounded-full font-bold hover:bg-[#f5c342] transition mb-16 shadow-lg shadow-[#fff3cd]">
                Begin your search
            </button>

            <!-- Talent Cards Carousel/Grid -->
            <div class="flex gap-4 overflow-x-auto no-scrollbar px-4 pb-4 snap-x snap-mandatory">
                <!-- Card 1 -->
                <div class="min-w-[240px] md:min-w-[280px] bg-gray-100 rounded-2xl overflow-hidden snap-center relative group">
                    <img class="w-full h-80 object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_92fa1f4d11_a7848e50f0703b0c.png" alt="Senior Product Designer" />
                    <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent text-white text-left">
                        <p class="font-bold text-sm">Hendes Cooper</p>
                        <p class="text-[10px] opacity-80 uppercase tracking-wider">Senior Product Designer</p>
                    </div>
                </div>
                <!-- Card 2 -->
                <div class="min-w-[240px] md:min-w-[280px] bg-gray-100 rounded-2xl overflow-hidden snap-center relative group">
                    <img class="w-full h-80 object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_2945763275_fb82121311c31acd.png" alt="Creative Lead" />
                    <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent text-white text-left">
                        <p class="font-bold text-sm">Maya Daley</p>
                        <p class="text-[10px] opacity-80 uppercase tracking-wider">Creative Lead</p>
                    </div>
                </div>
                <!-- Card 3 -->
                <div class="min-w-[240px] md:min-w-[280px] bg-gray-100 rounded-2xl overflow-hidden snap-center relative group">
                    <img class="w-full h-80 object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_5592f706a1_120c562cf721d1fa.png" alt="3D Artist" />
                    <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent text-white text-left">
                        <p class="font-bold text-sm">Cody Fisher</p>
                        <p class="text-[10px] opacity-80 uppercase tracking-wider">3D Artist</p>
                    </div>
                </div>
                <!-- Card 4 -->
                <div class="min-w-[240px] md:min-w-[280px] bg-gray-100 rounded-2xl overflow-hidden snap-center relative group">
                    <img class="w-full h-80 object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_4e01437848_8716105aeec633a1.png" alt="UI Designer" />
                    <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent text-white text-left">
                        <p class="font-bold text-sm">Esther Howard</p>
                        <p class="text-[10px] opacity-80 uppercase tracking-wider">UI Designer</p>
                    </div>
                </div>
                <!-- Card 5 -->
                <div class="min-w-[240px] md:min-w-[280px] bg-gray-100 rounded-2xl overflow-hidden snap-center relative group">
                    <img class="w-full h-80 object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_3038b6ea1f_158dcbd21030084a.png" alt="Motion Director" />
                    <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent text-white text-left">
                        <p class="font-bold text-sm">Dmitry Kars</p>
                        <p class="text-[10px] opacity-80 uppercase tracking-wider">Motion Director</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- block:end hero -->
</body>
</html>

From this template

ZenDesign screenshot Free

Business

ZenDesign

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