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

235

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

1 month ago

527
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

3 weeks ago

307
Post Detail
Post detail with form

Author:
Sedat Kumcu

4 months ago

660
Comment form

Author:
Sophia Baker

2 years ago

11.6k
Banner for app download
Show App Download Buttons for the App Store and Play Store

Author:
Pixel Perfect

8 months ago

860
Login Form

Author:
Amit Pachange

2 years ago

11.4k
Reservation form with fabform.io

Author:
Ho O

2 months ago

414
images

Author:
Maxim

1 year ago

2.5k
Animated modal with Tailwind Css and alpinejs

Author:
Michael Andreuzza

10 months ago

2.1k
Payment Form

Author:
ABDO-SY

2 weeks ago

119
Internet Connection Check
A sleek and responsive Internet connection status checker built with Tailwind CSS and Alpine.js. This component provides real-time feedback about the user's internet connection status.

Author:
Maxim

1 month ago

480
contact us form
contact us form that uses the Free VeilMail EmailProtection Service too!

Author:
Geoffrey Callaghan

1 year ago

5.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components