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.1k

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

7 months ago

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

6 months ago

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

2 months ago

398
Form
form

Author:
Aman kumar

1 year ago

1.4k
Black friday sale / deal banner

Author:
Conan Hilton

2 years ago

10k
animation login form
An animated login form enhances the user experience by making the interaction visually engaging and modern. Below is a breakdown of key animation techniques used in animated login forms, plus examples you can use or customize.

Author:
Nicole Shalom

3 months ago

762
User registration form with Instructions

Author:
Fagundo67

2 years ago

24.1k
Sign In form

Author:
Amit Pachange

2 years ago

12k
Amazing 3D Login and Registiration Aniamation Form
create a stunning 3D animated background with floating geometric shapes, particle effects, and interactive elements using React, Three.js, and Tailwind CSS. This will be fully responsive and visually captivating.

Author:
Nicole Shalom

3 months ago

532
contact form
contact form

Author:
Geoffrey Callaghan

1 year ago

6.2k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

4 months ago

254
Forgot password form
Useful form for sending password reset link

Author:
Steven Kuhn

3 years ago

20.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components