Portfolio form

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

Card

Author Joseph Melvin Kanu

Tailwind v3.4 3.5k 9

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

Card with Thumbnail
Post card with image

Mr Robot

4 years ago

12k
card section neon
card section neon

Omer fils ELENGA

9 months ago

1.3k
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

2.1k
3D Amazing Product Card
Here's a stunning 3D product card with hover effects, 3D rotation, and a clean modern design using HTML, CSS (Tailwind), and a bit of JavaScript for the interactive 3D effect:

Nicole Shalom

1 year ago

2.1k
Article-Post Preview card

Prashant

4 years ago

10.6k
Animated cards with Tailwind CSS

Michael Andreuzza

2 years ago

13.1k
Card

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2k
Team Section

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

2.9k
Auto-Flipping 3D Profile Card with Tailwind CSS
This project showcases a 3D auto-flipping profile card built with HTML, Tailwind CSS, and vanilla JavaScript. The front side displays the user’s photo, name, and role, while the back side reveals contact information. The card flips automatically every few seconds to add a dynamic, engaging feel—perfect for portfolios or personal websites.

irahoza daniel

1 year ago

1.7k
Card
Card

Aman kumar

2 years ago

2.2k
Pricing card
basic pricing card with single price

Kaung Htet Min

1 year ago

551
card

Raul antonio de la cruz hernandez

10 months ago

759