Home
Joseph Melvin Kanu
Portfolio form

Portfolio form

This tailwind example is contributed by Joseph Melvin Kanu, on 10-Mar-2024. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Joseph Melvin Kanu

3.2k

Fork Fullscreen

<div class="max-w-screen-xl mx-auto my-7 lg:px-20" id="contact">
  <form action="" method="post">
    <div class="w-full p-8 my-4 mr-auto shadow-2xl md:px-12 lg:w-9/12 lg:pl-20 lg:pr-40 rounded-2xl">
      <div class="flex">
        <h1 class="text-5xl text-[#A85168] font-bold ">Hire Me</h1>
      </div>
      <div class="grid grid-cols-1 gap-5 mt-5 md:grid-cols-2">
        <input class="w-full p-3 mt-2 text-gray-900 bg-gray-100 rounded-lg focus:outline-none focus:border-outline" type="text" placeholder="First Name" name="firstName" autocomplete="name" />
        <input class="w-full p-3 mt-2 text-gray-900 bg-gray-100 rounded-lg focus:outline-none focus:shadow-outline" type="text" placeholder="Last Name" name="lastName" autocomplete="family-name" />
        <input class="w-full p-3 mt-2 text-gray-900 bg-gray-100 rounded-lg focus:outline-none focus:shadow-outline" type="email" placeholder="Email" name="email" autocomplete="email" />
        <input class="w-full p-3 mt-2 text-gray-900 bg-gray-100 rounded-lg focus:outline-none focus:shadow-outline" type="tel" placeholder="Phone" name="phone" autocomplete="tel" />
      </div>
      <div class="my-4">
        <textarea placeholder="Message" class="w-full h-32 p-3 mt-2 text-gray-900 bg-gray-100 rounded-lg focus:outline-none focus:shadow-outline" name="message" autocomplete="message"></textarea>
      </div>
      <div class="w-1/2 my-2 lg:w-1/4">
        <button type="submit" class="w-full p-3 text-sm font-bold tracking-wide text-gray-100 uppercase bg-[#A12347] rounded rounded-xl hover:bg-blue-700-lg focus:outline-none focus:shadow-outline">
                        Send Message
                    </button>
      </div>
    </div>
  </form>
  <div class="w-full px-8 py-12 ml-auto bg-[#1B6485] lg:-mt-96 lg:w-2/6 rounded-2xl">
    <div class="flex flex-col text-white">
      <div class="flex w-2/3 my-4 lg:w-1/2">
        <img class="pt-2 pr-2 h-7 w-7" src="https://icons8.com/icon/OBmVbH2qOGwK/location" alt="location">
        <div>
          <h2 class="text-2xl">Office</h2>
          <p class="text-gray-200" style="white-space: nowrap;">27B Grassfield, Lumely</p>
        </div>
      </div>
      <div class="flex w-2/3 my-4 lg:w-1/2">
        <img class="pt-2 pr-2 h-7 w-7 " src="https://icons8.com/icon/letUS1DJO1ou/call" alt="call us">
        <div>
          <h2 class="text-2xl">Call</h2>
          <p class="text-gray-200" style="white-space: nowrap;">Tel:+232-79-15-39-15</p>
        </div>
      </div>
      <div class="flex w-2/3 my-4 lg:w-1/2">
        <img class="pt-2 pr-2 h-7 w-7" src="https://icons8.com/icon/LPcVDft9Isqt/email" alt="Email us">
        <div>
          <h2 class="text-2xl">Email</h2>
          <p class="text-gray-200" style="white-space: nowrap;">Email:kanujosephmelvin@gmail.com</p>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Profile, Team or Testimonial
Profile, Team or Testimonial

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

1 year ago

3.9k
Trending Users
Tailwind Flex Trending Users Card Design

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

1 year ago

4.2k
3D Modern Pricing Card
Here's a modern, reusable Pricing Card component that's highly popular on platforms like TailwindFlex. It's clean, responsive, and designed for conversions.

Author:
dev-fab250

10 months ago

811
Dashboard Stats Widget
Here’s a sleek Stats Widget built with Tailwind CSS that you can sell on TailwindFlex. It includes animated hover effects, trend indicators, and responsive design.

Author:
dev-fab250

10 months ago

1.8k
Best incamas to date

Author:
ORGIN_DREAMS

10 months ago

1.1k
Otp-code template
This is an OTP code template that contains the one-time password, which can be sent to the user's email either when they are signing up for the first time or for multi-factor authentication (MFA) during the login process.

Author:
anandu ap

1 year ago

2.7k
Card Slider

Author:
Maxim

1 year ago

1.7k
Coupon code card
Display Special Offer with Coupon Code

Author:
Dipti narayan

2 years ago

11.2k
The Future of Web Development
love my product

Author:
Code Master(Mfuranziza Dusabe Hamza)

10 months ago

910
Tailwind image grid
tailwind picture grid

Author:
Anonymous

2 years ago

10.7k
Card
Card with Likes and download Button

Author:
Mrunal Solkar

2 years ago

10.8k
Video card
Video card component for tailwind css

Author:
Rajesh kulkarni

3 years ago

17.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components