Published on

How To Build A Intercom's Inbox UI With Tailwind CSS With Tailwind CSS In 6 Easy Steps?

Tags
Intercom's Inbox UI with Tailwind CSS

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined CSS classes to help you build custom designs quickly. It's a popular choice among developers because it allows you to write less custom CSS and focus more on building your application.

The description of Intercom's Inbox UI with Tailwind CSS ui component

Intercom is a popular customer messaging platform that provides a powerful inbox for managing conversations with customers. The Intercom Inbox UI is a complex design that requires a lot of custom CSS to implement. With Tailwind CSS, you can easily create a replica of the Intercom Inbox UI with minimal custom CSS.

Why use Tailwind CSS to create a Intercom's Inbox UI with Tailwind CSS ui component?

Tailwind CSS provides a set of pre-defined CSS classes that can be used to create complex designs quickly. This saves time and effort, as you don't have to write custom CSS for every design element. With Tailwind CSS, you can easily create a replica of the Intercom Inbox UI without spending hours writing custom CSS.

The preview of Intercom's Inbox UI with Tailwind CSS ui component

To give you an idea of what the Intercom Inbox UI looks like, here's a preview of the design:

Free download of the Intercom's Inbox UI with Tailwind CSS's source code

The source code of Intercom's Inbox UI with Tailwind CSS ui component

If you're interested in seeing the source code for the Intercom Inbox UI with Tailwind CSS, here's a snippet of the HTML and CSS:

<div class="flex flex-row h-screen bg-gray-100">
  <div class="flex flex-col justify-between items-center flex-none w-16 bg-gray-200">
    <div class="flex flex-col space-y-4 w-full items-center pt-5">
      <a><div class="rounded-full bg-gray-400 w-8 h-8"></div></a>
      <a class="block relative w-full h-16 w-16 flex justify-center items-center">
        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path></svg>
        <div class="absolute top-0 right-0 mr-3 mt-3 bg-red-500 w-4 h-4 text-xs text-white rounded-full text-center">5</div>
      </a>
      <a><div class="rounded-full bg-gray-400 w-8 h-8"></div></a>
    </div>
    <div class="flex flex-col space-y-4 pb-5">
      <a><div class="rounded-full bg-gray-400 w-8 h-8"></div></a>
      <a><div class="rounded-full bg-gray-400 w-8 h-8"></div></a>
    </div>

  </div>

  <div class="w-64 flex-none bg-gray-100 p-4 flex flex-col space-y-4">
    <div class="flex flex-row justify-between items-center mb-6">
      <h1 class="font-semibold text-2xl">Inbox</h1>
      <svg class="flex-none w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
    </div>

    <div class="bg-red-200 h-64"></div>
    <div class="bg-red-200 h-64"></div>
  </div>

  <div class="flex flex-row flex-auto bg-white rounded-tl-xl border-l shadow-xl">
    <div class="flex flex-col w-1/5">
      <div class="flex-none h-24 bg-red-200"> top</div>

      <div class="flex-auto overflow-y-auto">

        <a class="block border-b">
          <div class="border-l-2 border-transparent hover:bg-gray-100 p-3 space-y-4">
            <div class="flex flex-row items-center space-x-2">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <strong class="flex-grow text-sm">Nikola Tesla</strong>
              <div class="text-sm text-gray-600">5hr</div>
            </div>

            <div class="flex flex-row items-center space-x-1">
              <svg class="flex-none w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <div class="flex-grow truncate text-xs">some message content whedkjwhed wkjehdkjweh dkjhwekjdhwekjhd </div>
            </div>
          </div>
        </a>

        <a class="block border-b">
          <div class="border-l-2 border-blue-500 bg-blue-100 p-3 space-y-4">
            <div class="flex flex-row items-center space-x-2">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <strong class="flex-grow text-sm">Nikola Tesla</strong>
              <div class="text-sm text-gray-600">5hr</div>
            </div>

            <div class="flex flex-row items-center space-x-1">
              <svg class="flex-none w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <div class="flex-grow truncate text-xs">some message content whedkjwhed wkjehdkjweh dkjhwekjdhwekjhd </div>
            </div>
          </div>
        </a>

      </div>
    </div>

    <div class="w-3/5 border-l border-r border-gray-400 flex flex-col">
      <div class="flex-none h-20 flex flex-row justify-between items-center p-5 border-b">
        <div class="flex flex-col space-y-1">
          <strong>Nikola Tesla</strong>
          <input type="text" placeholder="Add coversation title" class="text-sm outline-none border-b border-dashed text-black placeholder-gray-600"/>
        </div>
        <div class="flex flex-row items-center">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
        </div>
      </div>

      <div
        class="flex-auto overflow-y-auto p-5 space-y-4"
        style="background-image: url(https://static.intercomassets.com/ember/assets/images/messenger-backgrounds/background-1-99a36524645be823aabcd0e673cb47f8.png)"
      >
        <div class="flex flex-row space-x-2">
          <svg class="flex-none w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>

          <div class="flex flex-col">
            <div class="bg-gray-200 rounded p-5">
              Some message text
            </div>
            <div class="text-sm text-gray-600">4hr ago</div>
          </div>
        </div>

        <div class="flex flex-row justify-center text-sm text-gray-600">
          You assigned this conversation to yourself 5d ago
        </div>

        <div class="flex flex-row space-x-2 flex-row-reverse space-x-reverse">
          <svg class="flex-none w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>

          <div class="flex flex-col">
            <div class="bg-blue-100 rounded p-5">
              Some message text
            </div>
            <div class="text-sm text-gray-600">5hr ago</div>
          </div>
        </div>
      </div>

      <div class="flex-none h-40 p-4 pt-0">
        <textarea class="w-full h-full outline-none border focus:border-blue-600 hover:border-blue-600 rounded p-4 shadow-lg">Hi</textarea>
      </div>
    </div>

    <div class="w-1/5 bg-gray-200 overflow-y-auto flex flex-col">
      <div class="h-64 flex-none border-b border-gray-400 flex flex-col">
        hi
      </div>

      <div class="flex flex-col space-y-4 p-4">
        <div class="flex flex-none h-64 bg-white border rounded p-4 justify-center items-center">
          card content
        </div>
        <div class="flex flex-none h-64 bg-white border rounded p-4 justify-center items-center">
          card content
        </div>
        <div class="flex flex-none h-64 bg-white border rounded p-4 justify-center items-center">
          card content
        </div>
      </div>
    </div>
  </div>
</div>

How to create a Intercom's Inbox UI with Tailwind CSS with Tailwind CSS?

Now that you know what Tailwind CSS is and why it's a great choice for building the Intercom Inbox UI, let's dive into the steps to create the design.

Step 1: Set up a new project

To get started, create a new project and install Tailwind CSS. You can install Tailwind CSS using npm or yarn. Here's an example of how to install Tailwind CSS using npm:

npm install tailwindcss

Step 2: Create the HTML structure

Next, create the HTML structure for the Intercom Inbox UI. You can use any HTML editor or text editor to create the HTML file. Here's an example of the HTML structure:

<div class="container mx-auto">
  <div class="flex">
    <div class="w-1/4 bg-gray-200 h-screen">
      <!-- Sidebar -->
    </div>
    <div class="w-3/4 bg-white h-screen">
      <!-- Main content -->
    </div>
  </div>
</div>

In this example, we're using the container and mx-auto classes to center the content on the page. We're also using the flex class to create a two-column layout. The first column is the sidebar, and the second column is the main content.

Step 3: Style the sidebar

Next, let's style the sidebar. We'll use the bg-gray-200 class to set the background color of the sidebar to gray. We'll also use the h-screen class to set the height of the sidebar to the full height of the screen.

<div class="w-1/4 bg-gray-200 h-screen">
  <div class="p-4">
    <h1 class="text-lg font-bold">Inbox</h1>
    <ul class="mt-4">
      <li class="mb-2">
        <a href="#" class="text-gray-700 hover:text-blue-600">All conversations</a>
      </li>
      <li class="mb-2">
        <a href="#" class="text-gray-700 hover:text-blue-600">Unread</a>
      </li>
      <li class="mb-2">
        <a href="#" class="text-gray-700 hover:text-blue-600">Assigned to me</a>
      </li>
      <li class="mb-2">
        <a href="#" class="text-gray-700 hover:text-blue-600">Closed</a>
      </li>
    </ul>
  </div>
</div>

In this example, we're using the p-4 class to add padding to the sidebar. We're also using the text-lg and font-bold classes to style the heading.

Step 4: Style the main content

Next, let's style the main content. We'll use the bg-white class to set the background color of the main content to white. We'll also use the h-screen class to set the height of the main content to the full height of the screen.

<div class="w-3/4 bg-white h-screen">
  <div class="p-4">
    <div class="mb-4">
      <h2 class="text-lg font-bold">All conversations</h2>
      <p class="text-sm text-gray-500">Showing 1-10 of 100 conversations</p>
    </div>
    <div class="mb-4">
      <div class="flex items-center">
        <input type="checkbox" class="mr-2">
        <span class="text-sm text-gray-700">Select all</span>
      </div>
    </div>
    <div class="mb-4">
      <div class="border-b border-gray-200 pb-4">
        <div class="flex items-center">
          <input type="checkbox" class="mr-2">
          <span class="text-sm text-gray-700">Conversation title</span>
        </div>
        <div class="text-sm text-gray-500">Customer name</div>
      </div>
    </div>
    <div class="mb-4">
      <div class="border-b border-gray-200 pb-4">
        <div class="flex items-center">
          <input type="checkbox" class="mr-2">
          <span class="text-sm text-gray-700">Conversation title</span>
        </div>
        <div class="text-sm text-gray-500">Customer name</div>
      </div>
    </div>
  </div>
</div>

In this example, we're using the p-4 class to add padding to the main content. We're also using the text-lg and font-bold classes to style the heading. We're using the text-sm and text-gray-500 classes to style the subheading.

Step 5: Add interactivity

Next, let's add interactivity to the design. We'll use JavaScript to toggle the checkboxes and select all checkboxes.

const checkboxes = document.querySelectorAll('input[type="checkbox"]');

function toggleCheckbox() {
  const checked = this.checked;
  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
  checkboxes.forEach((checkbox) => {
    checkbox.checked = checked;
  });
}

function toggleSelectAll() {
  const checked = checkboxes[0].checked;
  checkboxes.forEach((checkbox, index) => {
    if (index !== 0) {
      checkbox.checked = checked;
    }
  });
}

checkboxes.forEach((checkbox, index) => {
  if (index === 0) {
    checkbox.addEventListener('change', toggleSelectAll);
  } else {
    checkbox.addEventListener('change', toggleCheckbox);
  }
});

In this example, we're using JavaScript to toggle the checkboxes and select all checkboxes.

Step 6: Customize the design

Finally, you can customize the design further by adding your own custom CSS. You can add custom CSS by creating a new CSS file and linking it to the HTML file.

Conclusion

In this article, we've learned how to build a replica of the Intercom Inbox UI with Tailwind CSS. We've covered the benefits of using Tailwind CSS, the HTML structure of the design, and the steps to create the design. With Tailwind CSS, you can easily create complex designs like the Intercom Inbox UI without writing a lot of custom CSS.