Published on

Ways To Make A Page Home Add Contact Keeper With Tailwind CSS In 60 Minutes

Tags
ButtonsFormsInputs
Page Home Add Contact Keeper

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows you to create custom designs without writing any CSS. It provides a set of pre-defined CSS classes that you can use to style your HTML elements. Tailwind CSS is gaining popularity among developers because of its ease of use and flexibility.

The description of Page Home Add Contact Keeper ui component

The Page Home Add Contact Keeper is a UI component that allows users to add and manage their contacts. It is a simple and intuitive interface that is easy to use. The component consists of a form where users can enter their contact information, and a list where they can view and manage their contacts.

Why use Tailwind CSS to create a Page Home Add Contact Keeper ui component?

Tailwind CSS provides a set of pre-defined CSS classes that you can use to style your HTML elements. This makes it easy to create custom designs without writing any CSS. Using Tailwind CSS can save you a lot of time and effort when creating UI components like the Page Home Add Contact Keeper.

The preview of Page Home Add Contact Keeper ui component.

The Page Home Add Contact Keeper UI component is a simple and intuitive interface that allows users to add and manage their contacts. The component consists of a form where users can enter their contact information, and a list where they can view and manage their contacts.

Free download of the Page Home Add Contact Keeper's source code

The source code of Page Home Add Contact Keeper ui component.

To create the Page Home Add Contact Keeper UI component, you can use HTML, CSS, and Tailwind CSS.

<form>
	<div class="px-4 py-6 sm:grid grid-cols-2 gap-x-6 max-w-4xl mx-auto">
		<div class="mb-8">
			<h2 class="text-center text-2xl font-bold text-blue-800">Add Contact</h2>
			<div class="mt-6">
				<div class="flex-col space-y-4">
					<input type="text" placeholder="Name" class="border-2 w-full px-4 py-2 rounded-md text-md text-gray-700 outline-none" />
					<input type="text" placeholder="Name" class="border-2 w-full px-4 py-2 rounded-md text-md text-gray-700 outline-none" />
					<input type="text" placeholder="Name" class="border-2 w-full px-4 py-2 rounded-md text-md text-gray-700 outline-none" />
      </div>
					<div class="mt-4">
						<p class="mb-1 text-gray-700 font-semibold text-sm">Contact Type</p>
						<div class="flex space-x-4 my-2 items-center">
							<div class="flex items-center space-x-1">
								<input type="radio" id="personal" class="cursor-pointer">
								<label for="personal" class="cursor-pointer">Personal</span>
							</div>
							<div class="flex items-center space-x-1">
								<input type="radio" id="professional" class="cursor-pointer">
								<label for="professional" class="cursor-pointer">Professional</span>
							</div>
						</div>
					</div>
      <button class="w-full mt-4 bg-gradient-to-tr from-indigo-600 to-purple-600 text-white py-2 rounded-md text-lg font-semibold">Add Contact</button>
				</div>
			</div>
  <div class=" space-y-4">
    			<div class=" p-6 rounded-md bg-indigo-50">
				<div class="flex justify-between mb-2 items-center">
					<p class="text-lg font-semibold items-center">Jill Johson</p>
					<p class="bg-indigo-500 text-indigo-50 px-3 py-1 rounded-md text-sm">Personal</p>
				</div>
				<div>
					<div class="flex items-center space-x-2">
						<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24"
							stroke="currentColor">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
								d="M3 19v-8.93a2 2 0 01.89-1.664l7-4.666a2 2 0 012.22 0l7 4.666A2 2 0 0121 10.07V19M3 19a2 2 0 002 2h14a2 2 0 002-2M3 19l6.75-4.5M21 19l-6.75-4.5M3 10l6.75 4.5M21 10l-6.75 4.5m0 0l-1.14.76a2 2 0 01-2.22 0l-1.14-.76" />
						</svg>
						<p class="text-md font-semibold">[email protected]</p>
					</div>
					<div class="flex mt-3 text-sm">
						<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24"
							stroke="currentColor">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
								d="M16 8l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2M5 3a2 2 0 00-2 2v1c0 8.284 6.716 15 15 15h1a2 2 0 002-2v-3.28a1 1 0 00-.684-.948l-4.493-1.498a1 1 0 00-1.21.502l-1.13 2.257a11.042 11.042 0 01-5.516-5.517l2.257-1.128a1 1 0 00.502-1.21L9.228 3.683A1 1 0 008.279 3H5z" />
						</svg>
						<p class="text-md mb-6">111-111-111</p>
					</div>
					<div class="space-x-1">
						<span class="text-md px-6 py-2 rounded-md bg-green-500 text-indigo-50 font-semibold cursor-pointer" text-indigo-50 font-semibold cursor-pointer>Edit</span>
						<span class="text-md px-6 py-2 rounded-md bg-red-500 text-indigo-50 font-semibold cursor-pointer">Delete</span>
					</div>
				</div>
			</div>
    			<div class=" p-4 rounded-md bg-indigo-50">
				<div class="flex justify-between mb-2 items-center">
					<p class="text-lg font-semibold items-center">Jill Johson</p>
					<p class="bg-indigo-500 text-indigo-50 px-3 py-1 rounded-md text-sm">Personal</p>
				</div>
				<div>
					<div class="flex items-center space-x-2">
						<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24"
							stroke="currentColor">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
								d="M3 19v-8.93a2 2 0 01.89-1.664l7-4.666a2 2 0 012.22 0l7 4.666A2 2 0 0121 10.07V19M3 19a2 2 0 002 2h14a2 2 0 002-2M3 19l6.75-4.5M21 19l-6.75-4.5M3 10l6.75 4.5M21 10l-6.75 4.5m0 0l-1.14.76a2 2 0 01-2.22 0l-1.14-.76" />
						</svg>
						<p class="text-md font-semibold">[email protected]</p>
					</div>
					<div class="flex mt-3 text-sm">
						<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24"
							stroke="currentColor">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
								d="M16 8l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2M5 3a2 2 0 00-2 2v1c0 8.284 6.716 15 15 15h1a2 2 0 002-2v-3.28a1 1 0 00-.684-.948l-4.493-1.498a1 1 0 00-1.21.502l-1.13 2.257a11.042 11.042 0 01-5.516-5.517l2.257-1.128a1 1 0 00.502-1.21L9.228 3.683A1 1 0 008.279 3H5z" />
						</svg>
						<p class="text-md mb-6">111-111-111</p>
					</div>
					<div class="space-x-1">
						<span class="text-md px-6 py-2 rounded-md bg-green-500 text-indigo-50 font-semibold cursor-pointer" text-indigo-50 font-semibold cursor-pointer>Edit</span>
						<span class="text-md px-6 py-2 rounded-md bg-red-500 text-indigo-50 font-semibold cursor-pointer">Delete</span>
					</div>
				</div>
			</div>
  </div>
		</div>
	</div>

How to create a Page Home Add Contact Keeper with Tailwind CSS?

To create the Page Home Add Contact Keeper UI component with Tailwind CSS, follow these steps:

  1. Create a new HTML file and add the necessary HTML elements for the form and list.
  2. Add the required Tailwind CSS classes to the HTML elements to style them.
  3. Add JavaScript code to handle form submission and to update the list of contacts.
  4. Test the UI component to ensure that it works as expected.

Here is the HTML code for the Page Home Add Contact Keeper UI component:

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

Here is the CSS code for the Page Home Add Contact Keeper UI component:

.p-6 {
  padding: 1.5rem;
}

.max-w-sm {
  max-width: 30rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.bg-white {
  background-color: #fff;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.space-x-4 {
  margin-right: 1rem;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.h-12 {
  height: 3rem;
}

.w-12 {
  width: 3rem;
}

.text-xl {
  font-size: 1.25rem;
}

.font-medium {
  font-weight: 500;
}

.text-black {
  color: #000;
}

.text-gray-500 {
  color: #6b7280;
}

Conclusion

Creating UI components like the Page Home Add Contact Keeper can be challenging, but with Tailwind CSS, it becomes much easier. Tailwind CSS provides a set of pre-defined CSS classes that you can use to style your HTML elements, saving you time and effort. By following the steps outlined in this article, you can create a Page Home Add Contact Keeper UI component in just 60 minutes.