Home
SAI BENDE
Hero section in react js

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 CSS v3. It is responsive. It supports dark mode.

Hero

Author SAI BENDE

4.5k

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

Food App Web design

Author:
Aitrik Saha

5 months ago

1.2k
Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Author:
Muhammad Umair Arshad

4 months ago

305
home page
Hero Section: Gradient background with noise texture Animated floating image Gradient text effect Call-to-action buttons Features Section: Three feature cards with gradient headers Hover animations Clean iconography Stats Display: Full-width gradient background Clean stat presentation Testimonials: Three testimonial cards with user avatars Star ratings Border accents Hover scaling effects Call-to-Action (CTA) Section: Gradient background Centered content Multiple action buttons Footer: Four-column layout Social media icons Newsletter signup Copyright information Design Features: Vibrant gradient color scheme Smooth hover animations and transitions Responsive layout for all screen sizes Modern typography Subtle floating animations Clean, card-based design

Author:
ishimwe prince

2 months ago

456
Website Mockup
An Onyx Component. This can be used for landing pages / other website mockup purposes. It's clean design will fit with most SAAS projects.

Author:
Coastal UI

10 months ago

1.5k
Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

6 months ago

972
login form php
A login form is a user interface element commonly found on websites and applications. Its main purpose is to authenticate users by asking them to entecredentian

Author:
nii fanny

2 months ago

225
Hero section - Htmlwind
Simple centered hero section

Author:
Htmlwind

2 months ago

221
Very simple hero

Author:
Laurits

2 years ago

8.6k
Creative Hero Section

Author:
Ijila Itunu

3 months ago

723
Hero section with bold heading

Author:
Abigail

2 years ago

11.3k
Hero section for website

Author:
Leon Bachmann

2 years ago

11.3k
Hero Section

Author:
Amine Ghanim

4 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components