Nature Hero

This tailwind example is contributed by $@(\/)(\/)¥, on 10-Jan-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example is Front page

Hero Landing Page

$$@(\/)(\/)¥ profile image$

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

Tailwind v3.4 2.6k 4

Fork Fullscreen

<div class="w-full min-h-screen bg-white dark:bg-black">
  <div class="flex flex-col gap-4 items-center justify-center pt-6 pb-10 md:px-6 px-4">
    
    <img class="w-full h-[60vh] rounded" src="https://images.unsplash.com/photo-1421789665209-c9b2a435e3dc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxNHx8bmF0dXJlfGVufDB8MHx8fDE3MzYxNTQzNzR8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Top Image">
    
    
    <div class="w-full flex gap-2 items-center justify-between">
      <div class="ld:w-1/3 flex flex-col">
        <h2 class="text-4xl capitalize font-semibold dark:text-white">Let's Explore the world with Us</h2>
        <p class="mt-2 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt incididuntadipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
        <button class="w-fit px-4 py-2 rounded mt-4 font-semibold bg-green-600 text-white">Learn More</button>
      </div>
      
      <img class="lg:block hidden w-[16rem] h-[18rem] border-[12px] border-gray-300 dark:border-gray-950" src="https://images.unsplash.com/photo-1475776408506-9a5371e7a068?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHxuYXR1cmV8ZW58MHwwfHx8MTczNjE1NDM3NHww&ixlib=rb-4.0.3&q=80&w=1080" alt="image">
      <img class="xl:block hidden w-[16rem] h-[18rem] border-[12px] border-gray-300 dark:border-gray-950" src="https://images.unsplash.com/photo-1475776408506-9a5371e7a068?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHxuYXR1cmV8ZW58MHwwfHx8MTczNjE1NDM3NHww&ixlib=rb-4.0.3&q=80&w=1080" alt="image">
      <img class="sm:block hidden w-[16rem] h-[18rem] border-[12px] border-gray-300 dark:border-gray-950" src="https://images.unsplash.com/photo-1475776408506-9a5371e7a068?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHxuYXR1cmV8ZW58MHwwfHx8MTczNjE1NDM3NHww&ixlib=rb-4.0.3&q=80&w=1080" alt="image">
    </div>
  </div>
</div>

Related Examples

A Fullscreen Hero Section

Brandon D

4 years ago

23.3k
Hero

Aman kumar

2 years ago

7.7k
Hero Section
Home hero section search bar

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

2 years ago

8.5k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Amit Pachange

2 years ago

16k
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

Sahil Sasapara

2 years ago

5.6k
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

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

2 years ago

9.7k
Hero Beer

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

2 years ago

5.5k
beautifull portfolio page
I create a portfolio page

Akram Khan

2 years ago

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

Coastal UI

1 year ago

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

Coastal UI

1 year ago

2.4k
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Coastal UI

1 year ago

2.8k
Portfolio Hero Section 4

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

1 year ago

4.8k