Hero section in react js

hero portfolio section in react js

This tailwind example is contributed by SAI BENDE, on 14-Apr-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Hero

Author SAI BENDE

Tailwind v3.4 6.6k 11

Fork Fullscreen

<div class="grid lg:grid-cols-2 items-center justify-items-center gap-5">
        <div class="order-1 lg:order-1 shadow-2xl ">
            <img class="h-80 w-80 object-cover lg:w-[500px] lg:h-[500px] " src="https://images.unsplash.com/photo-1581382575275-97901c2635b7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxtYW58ZW58MHwxfHx8MTcxMzA4OTE0OHww&ixlib=rb-4.0.3&q=80&w=1080" alt="" />
        </div>
        <div class="order-2 lg:order-2  flex flex-col justify-center lg:items-start text-center sm:text-left ">
            <p class="mt-2 text-3xl md:text-lg sm:text-sm text-white">Hi There</p>
            <p class="text-4xl font-bold md:text-7xl  text-white ">I'm
                <span class="text-orange-600">Sai Bende</span>.
            </p>
            <p class="text-3xl  md:text-6xl text-white">I am a {' '} <span>
                            <Typewriter
                                words={['Full Stack Dev.', 'Software Dev.', 'Web Designer.', 'Programmer.']}
                                loop={5}
                                cursor
                                cursorStyle='|'
                                typeSpeed={50}
                                deleteSpeed={50}
                                delaySpeed={1000}

/>
                        </span></p>
            <p class="mt-2 lg:text-3xl md:text-lg sm:text-sm  text-white ">Designer and Developer devoted to
                crafting beautiful web experiences
                focused on simplicity and purpose.</p>
            <div class='flex'>
                <button class="text-lg md:text-2xl bg-orange-600 text-white py-2 m-2 px-5 mt-10 hover:bg-zinc-800 rounded-full"><a href='#ContactMe'>Contact Me</a></button>
                <button class="text-lg md:text-2xl bg-orange-600 text-white py-2 m-2 px-5 mt-10 hover:bg-zinc-800 rounded-full " onClick={handleClick} > 🎉</button>
            </div>

</div>
</section>

Related Examples

Premium SAAS HERO Section
A hero section for your SAAS application

Emdadul Islam

2 years ago

3.5k
landi page template

Raul antonio de la cruz hernandez

9 months ago

765
Responsive Hero Section
Get this professional hero section for your website. Includes a gradient text effect, stylish background blurs, and a perfectly aligned image section. Easy to integrate and fully customizable for any project.

Homayoun

1 year ago

737
modern portifolio
by salvator

Baraka Salvator

1 year ago

1.1k
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Junclarkaizen Pagu

3 years ago

12.3k
Extra large hero

Gbenga Adegoke

3 years ago

11k
Hero Section

Gbenga Adegoke

3 years ago

10.4k
Very simple hero

Laurits

3 years ago

9.7k
Modern SaaS Agency Landing Page with Dark Mode & Mobile MenuE-Com With nav and filter
A premium SaaS agency landing page built with HTML, Tailwind CSS, and JavaScript. It features a sticky glassmorphism navbar, responsive mobile navigation drawer, light/dark mode toggle, animated hero section, case studies, services, process timeline, testimonial, FAQ accordion, booking CTA, and a clean modern footer. Perfect for startups, AI products, software agencies, creative studios, and digital businesses.

JUGENDRA GANGWAR

3 months ago

403
Hero section

Mohit Prajapati

4 years ago

12.9k
NFT Header with Hero

Abdul Baset Bappy

1 year ago

1.9k
Product Page
Showcase for the product.

muhamadrofii911

2 years ago

3.1k