Home page 2

Отзывчивый логотип по центру. Интерактивные кнопки призыва к действию.

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

Button Modal Logo cloud

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

914

Fork Fullscreen

<section class="mt-40 container px-5 mx-auto">
            <div class="relative bg-sky-600 shadow-xl shadow-gray-300 rounded-2xl mt-8">
                <a class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-4 bg-white rounded-full" href="#" title="Логотип">
                    <img src="{{asset('images/logo.png')}}" class="w-20 h-20" />
                </a>
                <div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center m-8">
                    <div class="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-8 md:mb-0 items-center text-center text-white">
                        <p class="mb-2 leading-relaxed">Приход храма</p>
                        <p class="mb-2 leading-relaxed">равноапостольного</p>
                        <h1 class="title-font sm:text-5xl text-4xl mb-4 font-medium text-white-900">КНЯЗЯ ВЛАДИМИРА</h1>
                        <p class="mb-2 leading-relaxed text-white-700">д.Чижевщина Брестской епархии</p>
                        <p class="mb-2 leading-relaxed">Белорусского Экзархата</p>
                        <p class="mb-2 leading-relaxed">Московского Патриарха</p>
                        <div class="flex justify-center py-8">
                            <button class="inline-flex border-b py-2 px-6 focus:outline-none text-lg transform motion-safe:hover:scale-110 bg-orange-400 text-white font-medium rounded-lg
                            hover:bg-sky-950  transition duration-700 ease-in-out"><a href="/note">Выбрать требу</a></button>
                            <button class="ml-4 inline-flex border-b py-2 px-6 focus:outline-none text-lg transform motion-safe:hover:scale-110 bg-sky-700 text-white font-medium rounded-lg
                            hover:bg-sky-950 transition duration-700 ease-in-out">Пожертвовать</button>
                        </div>
                    </div>
                    <div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 shadow-2xl hover:bg-origin-padding contrast-125 scale-100">
                        <img class="object-cover object-center rounded-2xl shadow-xl shadow-gray-400" alt="hero" src="/images/fon.jpg">
                    </div>
                </div>
            </div>
        </section>

<section class="text-gray-600 body-font">
            <div class="container px-5 mt-8 mx-auto">
                <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
                        <div class="p-4 md:w-1/3 sm:mb-0 mb-6">
                            <div class="w-full p-5 bg-blue-200 place-content-center text-sm rounded-2xl shadow-xl shadow-gray-400">
                                <div class="text-centre">
                                    <span>23</span>
                                    <span>ПН</span>
                                </div>
                                <span class="">9:00</span>
                                <span>Часы</span>
                                <span class="">9:30</span>
                                <span>Литургия</span>
                                <span class="">11:00</span>
                                <span>Молебень</span>
                                <span>Вознесению Господню</span>
                            </div>
                        </div>
                        <div class="p-4 md:w-1/3 sm:mb-0 mb-6">
                            <div class=" w-full p-5 bg-blue-200 place-content-center text-sm rounded-2xl shadow-xl shadow-gray-400">
                                <div class="text-centre">
                                    <span>24</span>
                                    <span>ВТ</span>
                                </div>
                                <span class="">9:00</span>
                                <span>Часы</span>
                                <span class="">9:30</span>
                                <span>Литургия</span>
                                <span class="">11:00</span>
                                <span>Молебень</span>
                                <span>Вознесению Господню</span>
                            </div>
                        </div>
                        <div class="p-4 md:w-1/3 sm:mb-0 mb-6">
                            <div class="w-full p-5 bg-blue-200 place-content-center text-sm rounded-2xl shadow-xl shadow-gray-400">
                                <div class="text-centre">
                                    <span>25</span>
                                    <span>СР</span>
                                </div>
                                <span class="">9:00</span>
                                <span>Часы</span>
                                <span class="">9:30</span>
                                <span>Литургия</span>
                                <span class="">11:00</span>
                                <span>Молебень</span>
                                <span>Вознесению Господню</span>
                            </div>
                        </div>
                </div>
            </div>
        </section>

Related Examples

Applications Showcase
This is a stylish and interactive application showcase component designed for web use. It features the following elements: Background Styling: The main container has a rounded-rectangle shape (rounded-3xl) with a subtle white base overlaying a high-resolution background image, styled with background-size: 600px for an artistic touch. The image itself dynamically serves as a backdrop, giving the component a layered appearance. Main Icon: A small circular icon, located at the top-right corner, appears with smooth hover effects: Enlarges to double its size (scale-[2]). Rotates (rotate-[410deg]). Moves diagonally upwards-right (translate-x-3, -translate-y-3). These transitions occur over a duration of 1 second (transition duration-1000). Overlay Gradient: A transparent gradient overlay (bg-gradient-to-l) adds a polished depth effect, transitioning from black (from-black/80) to lighter shades. App Icon and Info: Icon: The app icon is a smaller, bordered square image (rounded-2xl) with hover shrink animations (group-hover:scale-95). Text: A bold application title (text-md font-semibold) with hover-animated underline effects that gradually expand from left to right. A short app description styled as secondary text. Call-to-Action Button: Below the card is a subtle, rounded button (rounded-full) encouraging interaction. It features: A hover effect with color inversion (gray to black). A lift effect (hover:-translate-y-1) when hovered. This component is perfect for modern app showcases, offering a dynamic, user-friendly visual experience. It ensures a professional look while engaging users through smooth animations and clear calls to action.

Author:
Banshee

1 year ago

2.7k
button
Background Studio

Author:
nickosamba.nh21

1 month ago

210
Download on the Mac App Store dark button

Author:
Simon Scheffer

3 years ago

8.3k
Tailwind Different Button Styles
Fully Responsive Buttons

Author:
AKASH GANDHAR

1 year ago

2.3k
neon-button-purple

Author:
Mohammad Rashel

2 months ago

258
Modal with Tailwind CSS

Author:
EliteAI Tools

1 year ago

1.7k
Responsive Classes List Table with Edit and Delete buttons using Tailwind CSS
This responsive classes list table is built using Tailwind CSS and features: - A clean layout with a header displaying column titles. - Action buttons for editing and deleting entries. - Responsive design that adapts to various screen sizes. - Easy customization options to fit your project's needs.

Author:
Anum Shahana

1 year ago

3.3k
Tailwind CSS Button (Wavy Button)
The button uses Tailwind classes for size, background, border, border-radius, shadow, cursor, overflow, and transitions. The wave overlay is absolutely positioned at the bottom of the button, initially off-screen (top-full) and moves to the middle (top-1/2) on hover via the custom .wave class and keyframes. The font-poppins class isn’t a default Tailwind class. You should define it in your Tailwind configuration or replace it with font-sans if you haven't extended fonts.

Author:
KULDEEP

8 months ago

946
Menu button

Author:
Freja Jensen

3 years ago

16.4k
Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase
Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

Author:
SANJAY SINGH GARIYA

11 months ago

1.9k
Buttons with border bottom

Author:
Prashant

3 years ago

12.8k
Social Media Icons
Social Media Icons

Author:
Aman kumar

1 year ago

2.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components