Home
Aitrik Saha
Banner with Form

Banner with Form

This tailwind example is contributed by Aitrik Saha, on 20-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Front page

Banner Form Landing Page

Author Aitrik Saha

1.2k

Fork Fullscreen

<div class="relative">
  
<div class="bg-gradient-to-b from-red-500 to-red-800 h-64 flex flex-col items-center justify-center text-white px-4">
    <h1 class="text-center text-3xl font-extrabold mb-2 font-serif">
      Search according to your needs
    </h1>
    <p class="text-lg text-center">
      Discover the best opportunities and make your dream become reality.
    </p>
  </div>

<div class="px-4">
    
    <div class="relative w-full sm:absolute sm:-bottom-10 sm:left-0">
      <div class="bg-white border border-gray-300 shadow-2xl rounded-lg mx-auto max-w-full sm:max-w-4xl p-4">
        <div class="flex flex-col sm:flex-row gap-4 sm:gap-2 flex-wrap">
          <input
            type="text"
            placeholder="Search..."
            class="flex-grow p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-600"
          />
          <select class="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-600">
            <option value="">Category</option>
            <option value="house">House</option>
            <option value="apartment">Apartment</option>
            <option value="condo">Condo</option>
          </select>
          <input
            type="number"
            placeholder="Min Price"
            class="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-600"
          />
          <input
            type="number"
            placeholder="Max Price"
            class="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-600"
          />
          <button class="bg-red-600 text-white p-2 justify-center rounded-md hover:bg-red-700 w-full sm:w-auto flex-shrink-0 mt-2 sm:mt-0">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607z"
              />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="sm:flex items-center sm:mt-10 max-w-screen-xl">
  <div class="sm:w-1/2 p-10">
    <div class="image object-center text-center">
      <img class="rounded-lg" src="https://images.unsplash.com/photo-1556745753-b2904692b3cd?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MXwxfHNlYXJjaHw4fHx3b3JrfGVufDB8MHx8fDE3MzczNzQwODR8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="About Our Company" />
    </div>
  </div>
  <div class="sm:w-1/2 p-5">
    <div class="text">
      <h2 class="my-4 font-bold text-3xl sm:text-4xl">
        About <span class="text-red-600">Our Company</span>
      </h2>
      <p class="text-gray-700">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, commodi
        doloremque, fugiat illum magni minus nisi nulla numquam obcaecati placeat
        quia, repellat tempore voluptatum.
      </p>
    </div>

<button class="mt-4 bg-red-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-red-700 hover:text-white">
      Get Started
    </button>
  </div>
</div>

Related Examples

Login Form
Login Form With google icon

Author:
Md. Tofayel islam

9 months ago

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

8 months ago

1.4k
Contact Us Form
CTAs help convert visitors into action-takers (customers, subscribers, etc.), while Contact Us forms enable easy communication, building trust and support. Both are vital for engaging visitors and achieving your website’s objectives.

Author:
KULDEEP

4 months ago

474
Complete Profile Form with Avatar Upload & Social Links
A fully responsive profile setup form built with Tailwind CSS and Alpine.js. Users can upload a profile picture, fill in personal and professional details, add social links, and receive real-time validation feedback. Includes a smooth success message animation after submission, with optional navigation to the profile or dashboard. Perfect for onboarding flows or user account management interfaces.

Author:
wavy kits

3 weeks ago

40
Registration Form with Validation & Success State
A modern and interactive registration form built using Tailwind CSS and Alpine.js, designed for seamless user onboarding with real-time validation and elegant animations. This component includes client-side form validation, dynamic password visibility toggles, and a success confirmation screen with personalized feedback. It’s fully responsive, dark mode–ready, and styled for modern SaaS or startup platforms. ✨ Key Features 🧠 Real-time input validation for required fields (name, email, password, etc.) 🔒 Show/hide password toggle with animated SVG icons ✅ Success message with user details after submission 💨 Animated transitions using Alpine.js 🌙 Dark mode and light mode compatible 📱 Fully responsive across all screen sizes 🧩 Built with pure Tailwind CSS and Alpine.js (no external libraries) 💡 Perfect for: Registration or sign-up pages SaaS onboarding flows Portfolio or agency login systems Form validation demos or UI component libraries

Author:
wavy kits

3 weeks ago

25
Multi-Step Form with Progress Tracker
sleek and interactive multi-step registration form built with Tailwind CSS and Alpine.js, perfect for onboarding users through a smooth, step-by-step experience. This component enhances user engagement with animated transitions, real-time validation, and a dynamic progress bar that visually tracks completion. It’s fully responsive, dark-mode ready, and ideal for modern SaaS applications, startup landing pages, or authentication systems. ✨ Key Features 🪜 Three-step flow: Personal Info → Account Setup → Preferences ⚡ Real-time field validation with instant feedback 🔒 Password visibility toggles for better UX 📈 Progress bar tracker with smooth animations ✅ Success confirmation with user details preview 🌙 Dark mode support for modern UI design 💨 Alpine.js-powered interactivity – no external JS frameworks needed 📱 Fully responsive design optimized for all devices 💡 Perfect for: SaaS or startup registration flows Onboarding or sign-up pages Form builders, dashboard templates, or web app UIs UI component libraries & code snippets collections

Author:
wavy kits

3 weeks ago

153
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

167
Our Services Section – Animated & Responsive
A modern and dynamic “Services” section built with Tailwind CSS and Alpine.js, designed to showcase your company’s main offerings with clean visuals and engaging animations. This component uses smooth fade and slide animations to reveal each service card as it comes into view. Each card highlights a core business area — Web Development, Mobile Apps, and Cloud Solutions — with beautiful hover effects, icons, and descriptive lists. Perfect for SaaS websites, agencies, and startups looking to present their services in a visually appealing, professional, and responsive layout. Key Features Smooth scroll-triggered animations with Alpine.js Responsive grid layout (mobile → desktop ready) Built with Tailwind CSS for fast customization Dark mode support included Interactive hover effects for each service card Ideal for corporate, SaaS, or portfolio websites 💡 Services Included 🌐 Web Development (Responsive, SEO-friendly, Optimized) 📱 Mobile Apps (Cross-platform, iOS & Android) ☁️ Cloud Solutions (AWS, Azure, Auto-scaling, Security)

Author:
wavy kits

3 weeks ago

154
Contact Form

Author:
Sophia Baker

2 years ago

10.3k
Simple Sign-In Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Author:
Anja Müller

2 years ago

7.8k
login
Dark mode login

Author:
Hacker Development

6 months ago

975
Nature Hero

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

9 months ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components