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

2.9k

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

Astro build starter template with Tailwind
Astro build starter template with Tailwind

Author:
Geoffrey Callaghan

1 year ago

3.6k
Card post blog
Targetas para blog

Author:
Raul antonio de la cruz hernandez

2 weeks ago

43
Responsive Tailind css card
the best Responsive Card with image

Author:
irahoza daniel

6 months ago

518
Enhanced Student Testimonials Section
A modern, interactive testimonials section featuring glassmorphism design, floating animations, and social proof elements. Includes star ratings, course badges, user profiles with online status indicators, and a stats section. Built with Tailwind CSS and features gradient backgrounds, hover effects, and responsive design optimized for showcasing student success stories and building credibility.

Author:
Muhammad Umair Arshad

3 months ago

455
Animated Profile Card
Animated profile card with profile completion circle

Author:
Shivam Vishwakarma

10 months ago

1.5k
Image cards

Author:
Reuben Enahoro

1 year ago

1.7k
Website Pricing List Card Component
A Website Pricing List Card Component is a reusable UI element that displays pricing plans or packages on a website, typically for SaaS products, subscriptions, or service tiers. It helps users easily compare different pricing options and choose the best one.

Author:
dev-fab250

6 months ago

1.1k
card appetizer
ss

Author:
Anonymous

1 year ago

1.7k
Labs card
Lab item list card

Author:
Sedat Kumcu

1 year ago

1.8k
Checkout Card
A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

Author:
Rajesh Maheshwari

9 months ago

1.2k
Profile Card

Author:
Crimson

10 months ago

1.4k
Highlights - Speakers Section

Author:
ABDO-SY

7 months ago

698

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components