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

439

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

2 months ago

821
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

2 months ago

531
Login form

Author:
Leon Bachmann

2 years ago

12.3k
Large File upload input

Author:
Akshay

2 years ago

13.4k
Apply Coupon Code form

Author:
Lyra Ravensong

1 year ago

7.9k
SingIn / Signup Form
A modern and responsive authentication card with Sign In & Sign Up options, featuring a seamless toggle and social login (Facebook, GitHub). Designed with Tailwind CSS, it offers a clean UI, smooth transitions, and full mobile responsiveness.

Author:
Rajesh Maheshwari

1 month ago

447
Contact us form template with fabform

Author:
Ho O

3 months ago

547
Simple Sign up form
A responsive simple singup or login form

Author:
Emdadul Islam

10 months ago

1.4k
Feedback Form with rating input
take users feedback with this simple form

Author:
Nour Haider

1 year ago

9.8k
A Fullscreen Hero Section

Author:
Brandon D

2 years ago

18.2k
Black friday sale / deal banner

Author:
Conan Hilton

1 year ago

9.4k
Coming Soon Page
Modern , gradient coming soon page

Author:
Rajesh Maheshwari

1 month ago

179

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components