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

Hero section with bold heading

Abigail

3 years ago

12.2k
Portfolio Hero Section 5

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

3.1k
Reader AI – Your AI-Powered Knowledge & Thinking System
Reader AI helps you read, think, and remember better. Upload books, highlight insights, chat with AI, and build a personal knowledge system that evolves with you.

Ayyamperumal S

7 months ago

555
App Hero Section With header

Abdul Baset Bappy

1 year ago

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

Ameth Galarcio

1 year ago

2.4k
Hero Section

Muzammil Riaz

3 months ago

201
login form
this login form it will be used for sign in to every website

nii fanny

1 year ago

922
Background image section

Marc

2 years ago

7.5k
Gaming UI Card, Form
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Ayyamperumal S

10 months ago

731
Divine Shree Ram Hero Section | Tailwind CSS Responsive UI for Devotional |Hero section |Hero
Explore a stunning and responsive Hero Section dedicated to Lord Ram, crafted with Tailwind CSS. Perfect for spiritual brands, Ramayana-inspired products, or devotional e-commerce platforms. Fully responsive, dark mode compatible, and animation-rich UI.

Rajesh Pandey

1 year ago

1.7k
section footer

Raul antonio de la cruz hernandez

11 months ago

836
test
test

Anonymous

1 year ago

1.1k