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

1.4k

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

Modern CV Template - Stylish HTML and Tailwind CSS Design for Professionals
Download this modern CV template crafted with HTML and Tailwind CSS. Featuring a clean, stylish design and easy customization, this CV template is perfect for professionals looking to make a strong impression. Showcase your skills, experience, and education with a visually appealing and responsive layout.

Author:
Hezron Okoko

1 year ago

3.2k
FUTURIC.
FUTURIC.

Author:
Omer fils ELENGA

2 days ago

13
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

1 year ago

2k
Tool Box
by salvator

Author:
Baraka Salvator

9 months ago

1.3k
Product Page
Showcase for the product.

Author:
muhamadrofii911

1 year ago

2.6k
tradition music
by salvator

Author:
Baraka Salvator

9 months ago

866
Single Page Portfolio

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

1 year ago

2.5k
App Hero Section With header

Author:
Abdul Baset Bappy

8 months ago

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

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

1 year ago

8.8k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

1 year ago

2.4k
Hero Section
Created a good and responsive web Hero Page

Author:
Ravi.Kumar Kumar

1 year ago

2.7k
login
Sign in page on computer screen. Desktop computer with login form and sign in button. User account. Modern concept for web

Author:
Augustin

9 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components