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

5.3k

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

Minimalistic hero section

Author:
Sophia Baker

2 years ago

11.7k
Hero Section
Modern Gradient Color Scheme - Uses a professional purple-to-teal gradient for visual appeal Animated Elements: Floating decorative circles with subtle animation Fade-in effect for the main illustration Pulsing status indicator Engaging Typography: Gradient text for key phrases Responsive font sizing Clean Poppins font family Social Proof Elements: Client avatars Star ratings Trust indicators ("Trusted by 500+ businesses") Call-to-Action Buttons: Primary gradient button Secondary outlined button Hover effects and transitions Visual Hierarchy: Clear headline with emphasis on transformation Supporting subheading Balanced layout with image Performance Indicators: ROI badge Growth metric badge Responsive Design: Works on mobile and desktop Grid layout that adapts to screen size

Author:
KULDEEP

6 months ago

863
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

9 months ago

540
Template hero

Author:
Raul antonio de la cruz hernandez

3 weeks ago

55
hero page
by salvator

Author:
Baraka Salvator

7 months ago

1.6k
dreams
hero page by salvator

Author:
Baraka Salvator

7 months ago

924
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

Author:
MD Mostafa Niloy

2 months ago

96
hero section

Author:
SAURAV SINGH

9 months ago

1k
Hero $ Navigation
This is a modern, AI-focused landing page for a company called NEURALCORE that offers enterprise-grade AI solutions.

Author:
ishimwe shadad

7 months ago

1.1k
GreenLeaf
Transform Your Garden

Author:
ORGIN_DREAMS

7 months ago

1.1k
Tool Box
by salvator

Author:
Baraka Salvator

7 months ago

1.1k
Hero section with large image
Hero section with large image

Author:
Emdadul Islam

1 year ago

4.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components