Home
Maxim
Hero (with dark mode)

Hero (with dark mode)

Full-width hero section with background image overlay. Includes headline, description text and CTA buttons. Supports dark mode and responsive design.

This tailwind example is contributed by Maxim, on 02-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Hero

Author Maxim

151

Fork Fullscreen

<div class="relative w-full md:w-[600px] lg:w-[700px] p-8 md:p-12 mt-8 md:mt-12 mx-auto md:mr-8 lg:mr-12">
        <div class="bg-white/90 dark:bg-gray-800/90 p-8 rounded-lg backdrop-blur-sm">
            <div class="max-w-2xl">
                <h2 class="text-2xl md:text-3xl font-bold mb-4 dark:text-white">
                    დუბროვნიკი - ადრიატიკის მარგალიტი
                </h2>

<p class="text-gray-700 dark:text-gray-300 text-base md:text-lg mb-6">
                    აღმოაჩინეთ ჯადოსნური დუბროვნიკი, ქალაქი სადაც ისტორია ცოცხლობს. შუასაუკუნეების კედლები, ულამაზესი ადრიატიკის ზღვა და უძველესი არქიტექტურა გთავაზობთ დაუვიწყარ შთაბეჭდილებებს.
                </p>
                <div class="flex flex-col sm:flex-row gap-4">
                    <button class="bg-red-600 dark:bg-red-700 text-white px-6 py-2 rounded-md hover:bg-red-700 dark:hover:bg-red-800 transition-colors">
                        მეტის გაგება
                    </button>
                    <a href="#" class="text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 flex items-center transition-colors">
                        ყველა მიმართულება
                        <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

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

8 months ago

3.1k
Hero section with fancy heading

Author:
Laurits

2 years ago

10.8k
No distraction search field

Author:
_Amar_

1 year ago

10.8k
Brutalist Hero

Author:
threehymns

2 months ago

891
Hero

Author:
Aman kumar

1 year ago

5.3k
Hero section with a gradient background
With text overlay, and a call-to-action button

Author:
Anonymous

1 year ago

16.2k
Slide
A slide component which could be used as hero section or in a slideshow

Author:
farid

2 months ago

587
Hero

Author:
Hasan AlDoy (McDoy)

1 month ago

382
Standard Hero

Author:
Anonymous

11 months ago

2.8k
A hero component
It has a gradient background, a large title with a creative emphasis, and a call-to-action button.

Author:
Vikram Choudhary

1 year ago

8k
Hero Section

Author:
Gbenga Adegoke

1 year ago

9k
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Author:
Junclarkaizen Pagu

1 year ago

7.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components