Home
Samuel Abera
Portfolio Hero Section 3

Portfolio Hero Section 3

visually stunning and captivating hero section component for your portfolio website.

This tailwind example is contributed by Samuel Abera, on 09-Jun-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Front page,CV template

Header Hero Landing Page Resume template

Author Samuel Abera

5.7k

Fork Fullscreen

<div class="hidden md:flex md:items-center md:w-auto w-full z-10" id="menu">
            <nav>
                <ul class="md:flex items-center justify-between text-base xl:text-lg text-gray-100 pt-4 md:pt-0">
                    <li><a class="md:p-4 py-3 px-0 block text-rose-500 hover:text-rose-500" href="#">Home</a></li>
                    <li><a class="md:p-4 py-3 px-0 block hover:text-rose-500" href="#">About Me</a></li>
                    <li><a class="md:p-4 py-3 px-0 block hover:text-rose-500" href="#">Education</a></li>
                    <li><a class="md:p-4 py-3 px-0 block hover:text-rose-500" href="#">Experience</a></li>
                    <li><a class="md:p-4 py-3 px-0 block hover:text-rose-500" href="#">Projects</a></li>
                    <li><a class="md:p-4 py-3 px-0 block hover:text-rose-500 md:mb-0 mb-2" href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<div
        class="absolute hidden sm:block md:top-20 sm:top-[8%] top-[10%] xl:top-4 xl:left-[30%] lg:left-[35%] md:right-[20%] sm:left-[18%] left-[10%] overflow-hidden">
        <img class="2xl:h-[760px] xl:h-[600px] md:h-[450px] sm:h-[480px]" src="https://techakim.com/sam/tg/7268/li/imgs/2.png" alt="Image" />
    </div>

<div class="lg:px-16 px-4 pb-4 h-full flex flex-col sm:flex-row sm:items-center mt-10 sm:mt-0 text-white">
        
        <div class="w-full flex flex-col z-10">
            <h4 class="text-lg font-semibold text-white xl:text-2xl">Hey There</h4>
            <h1 class="2xl:text-8xl md:text-6xl sm:text-4xl text-3xl font-semibold font-serif mt-2">I'm
                <span class="">Samuel</span>
            </h1>
            <h1 class="md:text-6xl sm:text-4xl text-3xl font-semibold font-serif">Abera</h1>
            <h4 class="text-rose-500 mt-4 lg:text-2xl xl:3xl">--FullStack Developer</h4>

<p class="lg:w-[70%] w-full text-white text-md mt-4 md:text-lg 2xl:text-2xl">Experienced full-stack developer with 4+
                years
                of expertise in Laravel, NestJS, Nuxt.js, Next.js, Android, and some Flutter experience.</p>

<div>
                <button class="mt-6 px-6 py-1 bg-rose-500 text-lg text-white rounded-sm lg:text-2xl">Get In Touch</button>
            </div>
        </div>

<div
            class="w-full flex sm:flex-col justify-center mt-4 sm:mt-0 sm:gap-8 gap-2 bg-gray-700/60 sm:bg-transparent p-4 rounded-lg z-10">
            <div class="flex flex-col sm:items-end items-center">
                <div class="inline-flex gap-1 items-center">
                    <h2 class="xl:text-8xl md:text-6xl sm:text-4xl text-3xl font-semibold">5</h2>
                    <h2 class="text-rose-500 xl:text-6xl md:text-7xl sm:text-4xl text-3xl font-extrabold">+</h2>
                </div>
                <h4 class="text-sm sm:text-lg xl:text-2xl text-center">Years of Expireance</h4>
            </div>
            <div class="flex flex-col sm:items-end items-center">
                <div class="inline-flex gap-1 items-center">
                    <h2 class="xl:text-8xl md:text-6xl sm:text-4xl text-3xl font-semibold">55</h2>
                    <h2 class="text-rose-500 xl:text-8xl md:text-6xl sm:text-4xl text-3xl font-extrabold">+</h2>
                </div>
                <h4 class="text-sm sm:text-lg xl:text-2xl text-center">Component Contribution</h4>
            </div>
            <div class="flex flex-col sm:items-end items-center">
                <div class="inline-flex gap-1 items-center">
                    <h2 class="xl:text-8xl md:text-6xl sm:text-4xl text-3xl font-semibold">127K</h2>
                    <h2 class="text-rose-500 xl:text-8xl md:text-6xl sm:text-4xl text-3xl font-extrabold">+</h2>
                </div>
                <h4 class="text-sm sm:text-lg xl:text-2xl text-center">User's Got Help</h4>
            </div>
        </div>
    </div>

</div>

Related Examples

Hero section with youtube video preview

Author:
Piet Vriend

1 year ago

10.7k
Home banner video background
Home banner video background

Author:
Rameez Rami

1 year ago

5.9k
Hero Section
A 2 column responsive hero section

Author:
Emdadul Islam

8 months ago

1.6k
Hero Banner
visually striking banner section It features pattern background with using SVG

Author:
Cosimo Fazio

11 months ago

4.9k
Landing Page Template
source https://github.com/gary149/tailwindcss-landing-gradients/blob/master/index.html

Author:
Conan Hilton

2 years ago

13.3k
Admin portal landing page

Author:
Srreyashi DeyChakii

8 months ago

2.6k
Minimalistic hero section

Author:
Sophia Baker

2 years ago

10.7k
header

Author:
alex_bel

10 months ago

2.6k
Very simple hero

Author:
Laurits

2 years ago

7.7k
Yoga Coach Hero Section

Author:
Samuel Abera

8 months ago

3.8k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

1 week ago

140
Interactive Pricing Table
This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers. Design and Features: ✅ Elegant Gradient Backgrounds • Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal. • The rounded-2xl design ensures a polished and smooth aesthetic. ✅ Interactive Hover Effects • Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]). • Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover. ✅ Pricing & Plan Details • Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500). • Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models. ✅ Call-to-Action Buttons • Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md). • The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction. ✅ Animated Background Icons • A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel. This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

4 weeks ago

270

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components