Home page

Home page для ПО, страница для входа в приложение.

This tailwind example is contributed by Алла Телегина, on 16-Feb-2025. Component is made with Tailwind CSS v3. It is responsive.

Footer Header Gradient

Author Алла Телегина

601

Fork Fullscreen

<body class="grid grid-rows-[auto_1fr_auto] min-h-screen">
<header class="text-white body-font bg-gray-800">
    <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
        <a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
            <div class="text-white bg-orange-600 border-0 py-1 px-8 focus:outline-none hover:bg-orange-500 rounded-tr-3xl rounded-bl-3xl round text-lg">
                <div style="vertical-align: inherit;">
                    <div style="vertical-align: inherit;">ARCTECH</div>
                </div>
            </div>
        </a>
        <nav class="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
            <a class="mr-5 hover:text-gray-400">
                <div style="vertical-align: inherit;">
                    <div style="vertical-align: inherit;">НОВЫЙ</div>
                </div>
            </a>
            <a class="mr-5 hover:text-gray-400">
                <div style="vertical-align: inherit;">
                    <div style="vertical-align: inherit;">ТЕКУЩИЙ</div>
                </div>
            </a>
            <a class="mr-5 hover:text-gray-400 text-orange-600 animate-pulse">
                <div style="vertical-align: inherit;">
                    <div style="vertical-align: inherit;">ГОРЯЩИЙ</div>
                </div>
            </a>
            <a class="mr-5 hover:text-gray-400">
                <div style="vertical-align: inherit;">
                    <div style="vertical-align: inherit;">ВСЕ</div>
                </div>
            </a>
        </nav>
        <button class="inline-flex items-center border-2 py-1 px-3 focus:outline-none hover:bg-orange-600 rounded-l-lg rounded-tr-lg text-white1 mt-4 md:mt-0">
            <div style="vertical-align: inherit;">
                <div style="vertical-align: inherit;">НАПИСАТЬ</div>
            </div>
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
                <path d="M5 12h14M12 5l7 7-7 7"></path>
            </svg>
        </button>
    </div>
</header>

<p class="lg:w-2/3 mx-auto leading-relaxed text-base">
            <div style="vertical-align: inherit;">
                <div class="animate-typing overflow-hidden whitespace-nowrap text-xl text-gray-800 fadeln" style="vertical-align: inherit;">Добро пожаловать в рабочую среду</div>
            </div>
            </p>
            <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900 pt-12">
                <div style="vertical-align: inherit;">
                    <div style="vertical-align: inherit;"><mark class="text-white bg-orange-600 border-0 py-1 px-8 focus:outline-none hover:bg-orange-500 rounded-tr-3xl rounded-bl-3xl round text-2xl">ARCTECH Podolsk</mark> </div>
                </div>
            </h1>
            <p class="lg:w-2/3 mx-auto leading-relaxed text-base pt-6">
            <div style="vertical-align: inherit;">
                <div class="animate-typing overflow-hidden whitespace-nowrap text-xl text-gray-800 fadeIn" style="vertical-align: inherit;">Продуктивного дня</div>
            </div>
            </p>
        </div>

<button class="flex mx-auto animate-bounce text-white items-center bg-gray-800 border-0 py-2 px-8 focus:outline-none hover:bg-orange-600 rounded-l-lg rounded-tr-lg shadow-2xl text-lg">
                <div style="vertical-align: inherit;">
                    <div style="vertical-align: inherit;"><a href="index.html">АВТОРИЗАЦИЯ</a></div>
                </div>
            </button>
        </div>
    </div>
</section>
</main>

<footer class="text-gray-600 body-font bg-gray-800">
    <div class="container px-5 py-4 mx-auto flex items-center sm:flex-row flex-col">
        <a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
            <div class="text-white bg-orange-600 border-0 py-1 px-8 focus:outline-none hover:bg-orange-500 rounded-tr-3xl rounded-bl-3xl round text-lg">
                <div style="vertical-align: inherit;">
                    <div style="vertical-align: inherit;">ARCTECH</div>
                </div>
            </div>
        </a>
        <p class="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4">
        <div style="vertical-align: inherit;">
            <div style="vertical-align: inherit;">© 2020 Arctech — </div>
        </div>
        <span>
        <a class="ml-3 text-gray-500 px-8">
            +0 999 888 77 66
        </a>
        </span>
    </div>
</footer>

</body>

Related Examples

Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

8 months ago

2.9k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

6 months ago

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

4 months ago

1.3k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

4 months ago

875
Active Beauty Main Page

Author:
Maxim

2 months ago

296
Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Author:
Hamza Atig

2 months ago

133
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

1 month ago

164
home page
Hero Section: Gradient background with noise texture Animated floating image Gradient text effect Call-to-action buttons Features Section: Three feature cards with gradient headers Hover animations Clean iconography Stats Display: Full-width gradient background Clean stat presentation Testimonials: Three testimonial cards with user avatars Star ratings Border accents Hover scaling effects Call-to-Action (CTA) Section: Gradient background Centered content Multiple action buttons Footer: Four-column layout Social media icons Newsletter signup Copyright information Design Features: Vibrant gradient color scheme Smooth hover animations and transitions Responsive layout for all screen sizes Modern typography Subtle floating animations Clean, card-based design

Author:
ishimwe prince

4 weeks ago

150
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Author:
Nicole Shalom

4 weeks ago

136
SocialConnect - Stay Connected
SocialConnect - Stay Connected

Author:
Uwera Dorcas

3 weeks ago

142
Modern Website Header & Footer
I created a professional header and footer using HTML and Tailwind CSS with modern design elements, smooth animations, and interactive features.

Author:
Rathanak Phan

1 week ago

107
Footer

Author:
Abdul Baset Bappy

2 days ago

6

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components