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.9k

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

portifolio
skills

Author:
ishimwe prince

4 months ago

483
Innovative Rwanda-Canada Transport Services Website
Innovative Rwanda-Canada Transport Services Website

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

158
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Author:
Coastal UI

11 months ago

1.6k
Hero

Author:
Hasan AlDoy (McDoy)

8 months ago

1.3k
Nature Hero

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

8 months ago

1.3k
Hero Section Fashion Page

Author:
ABDO-SY

6 months ago

672
Portfolio Hero Section 5

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

5 months ago

1.5k
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Author:
Sahil Sasapara

1 year ago

4.4k
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.

Author:
Rajesh Pandey

4 months ago

685
App Hero Section With header

Author:
Abdul Baset Bappy

3 months ago

608
Responsive Hero Section
A clean and responsive hero section built with Tailwind CSS using a flexbox layout. Features a circular profile image, two action buttons ("Say Hello" and "View Projects"), and mobile-friendly design. Includes basic JavaScript interaction with a button.

Author:
Sudip chaudhary

3 months ago

293
Responsive hero section

Author:
Amit Pachange

2 years ago

15k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components