Published on

Practical Guide: Build A Contact Us Card With Tailwind CSS

Tags
CardsPages
Contact Us Card

As a FrontEnd technology blogger, you must have heard of Tailwind CSS, a utility-first CSS framework that helps you create responsive and customizable user interfaces with ease. In this article, we will guide you through building a Contact Us Card UI component using Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes for building custom user interfaces. It allows you to design and customize your UI components without writing any CSS code. With Tailwind CSS, you can create responsive, mobile-first designs that are easy to maintain.

The description of Contact Us Card UI component

A Contact Us Card UI component is a card that contains contact information such as phone number, email address, and social media links. It is a common UI component used on websites and applications to provide users with a way to contact the site or application owner.

Why use Tailwind CSS to create a Contact Us Card UI component?

Tailwind CSS provides a set of utility classes that make it easy to create custom UI components. It also provides responsive design classes that allow you to create mobile-first designs that look great on any device. Using Tailwind CSS to create a Contact Us Card UI component will save you time and effort in designing and styling the component.

The preview of Contact Us Card UI component

To give you an idea of what the Contact Us Card UI component will look like, here is a preview:

Free download of the Contact Us Card's source code

The source code of Contact Us Card UI component

Here is the source code for the Contact Us Card UI component:

<!-- component -->
<a href="#" class="flex flex-col max-w-xs text-white bg-teal-700 p-6 h-64 rounded-lg relative">
  <svg class="top-0 right-0 absolute overflow-hidden" width="371" height="371" viewBox="0 0 371 371" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M180.786 367V86.5L107.714 127.75V350.5C117.143 355.214 127.75 358.75 138.357 361.107V217.321L65.2857 258.571V322.214C27.5714 289.214 4 239.714 4 185.5C4 85.3214 85.3214 4 185.5 4C285.679 4 367 85.3214 367 185.5C367 239.714 343.429 288.036 305.714 321.036V258.571L232.643 217.321V305.714H205.536V110.071L256.214 145.429V352.857C233.821 362.286 210.25 367 184.321 367C183.143 367 181.964 367 180.786 367Z" stroke="white" stroke-opacity="0.1" stroke-width="8" stroke-miterlimit="10"/>
  </svg>
  <div class="">
    <h3 class="text-xl font-bold pb-2">Contact us</h3>
    <p class="text-sm">Do you want to know more about how we could help you? Don’t hesitate to get in touch with us.</p>
  </div>
  <div class="mt-auto pt-20 pb-6 flex justify-between">
    <span class="text-sm">Contact us</span>
    <svg class="w-6 h-6" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
    </svg>
  </div>
</a>

How to create a Contact Us Card with Tailwind CSS?

Now that you have an idea of what the Contact Us Card UI component will look like and the source code, let's dive into how to create it using Tailwind CSS.

Step 1: Create the HTML markup

First, create the HTML markup for the Contact Us Card UI component. Here is an example:

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="https://via.placeholder.com/150" alt="Contact Us Image">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Contact Us</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Get in touch with us</a>
      <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eu lorem et ultricies. In porta lorem at dui semper porttitor. Nullam quis cursus dui. Cras tincidunt vehicula tellus eu facilisis.</p>
      <div class="mt-4">
        <a href="#" class="inline-block px-3 py-1 leading-none border rounded text-black border-black hover:text-white hover:bg-black mt-4 lg:mt-0">Call Us</a>
      </div>
    </div>
  </div>
</div>

Step 2: Add Tailwind CSS classes

Next, add the Tailwind CSS classes to the HTML markup. Here is an example:

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="https://via.placeholder.com/150" alt="Contact Us Image">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Contact Us</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Get in touch with us</a>
      <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eu lorem et ultricies. In porta lorem at dui semper porttitor. Nullam quis cursus dui. Cras tincidunt vehicula tellus eu facilisis.</p>
      <div class="mt-4">
        <a href="#" class="inline-block px-3 py-1 leading-none border rounded text-black border-black hover:text-white hover:bg-black mt-4 lg:mt-0">Call Us</a>
      </div>
    </div>
  </div>
</div>

Step 3: Customize the Contact Us Card UI component

Finally, customize the Contact Us Card UI component to fit your design needs. You can change the colors, fonts, and layout using the Tailwind CSS utility classes. Here is an example:

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="https://via.placeholder.com/150" alt="Contact Us Image">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-blue-600 font-semibold">Contact Us</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Get in touch with us</a>
      <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod eu lorem et ultricies. In porta lorem at dui semper porttitor. Nullam quis cursus dui. Cras tincidunt vehicula tellus eu facilisis.</p>
      <div class="mt-4">
        <a href="#" class="inline-block px-3 py-1 leading-none border rounded text-black border-blue-600 hover:text-white hover:bg-blue-600 mt-4 lg:mt-0">Call Us</a>
      </div>
    </div>
  </div>
</div>

Conclusion

In this article, we have shown you how to create a Contact Us Card UI component using Tailwind CSS. With Tailwind CSS, you can easily create responsive and customizable UI components without writing any CSS code. We hope that this practical guide has been helpful in your FrontEnd development journey.