Published on

6 Ideas To Help You Build A A Call From Lisa ('BlackPink'). With Tailwind CSS Like A Pro

Tags
Cards
A call from Lisa ("BlackPink").

As a FrontEnd technology blogger, you may have heard of Tailwind CSS, a utility-first CSS framework that helps you build responsive and customizable user interfaces quickly. In this article, we will explore how to use Tailwind CSS to create a call from Lisa ("BlackPink") UI component.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined CSS classes that you can use to style your HTML elements. It is designed to help you build responsive and customizable user interfaces quickly. With Tailwind CSS, you don't need to write custom CSS code, which can save you a lot of time and effort.

The description of A call from Lisa ("BlackPink") UI component

A call from Lisa ("BlackPink") UI component is a simple and elegant user interface that mimics a phone call from Lisa, a member of the popular K-pop group BlackPink. The UI component consists of a background image, a circular profile picture of Lisa, a call duration timer, and a call end button.

Why use Tailwind CSS to create a A call from Lisa ("BlackPink") UI component?

Tailwind CSS provides a set of pre-defined CSS classes that you can use to style your HTML elements. This can save you a lot of time and effort compared to writing custom CSS code. Additionally, Tailwind CSS is designed to be responsive, which means that your UI component will look great on different screen sizes and devices.

The preview of A call from Lisa ("BlackPink") UI component

To create a call from Lisa ("BlackPink") UI component, we will use Tailwind CSS to style our HTML elements. The final result will look something like this:

Free download of the A call from Lisa ("BlackPink").'s source code

The source code of A call from Lisa ("BlackPink") UI component

To create a call from Lisa ("BlackPink") UI component, we will use HTML and Tailwind CSS. Here is the source code:

<!-- @Author: Dilshod Fayzullayev[DreamCoder] -->
<style>
  .rounded-3xl {
    border-radius: 2.5rem;
  }
</style>

<div class="flex h-screen select-none items-center justify-center overflow-hidden bg-pink-200">
  <div
    class="relative w-80 rounded-3xl border-2 border-solid border-white bg-white"
    style="height: 35rem;"
  >
    <img
      src="https://kpopping.com/documents/6f/0/5400/210924-YG-Naver-Post-LISA-s-LALISA-MV-Behind-documents-1(3).jpeg"
      class="h-full w-full rounded-3xl border-2 border-white object-cover"
      alt=""
    />
    <!-- TOP ICONS -->
    <div
      class="absolute top-0 left-0 right-0 flex justify-between bg-transparent px-4 py-4 text-2xl font-semibold text-white"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-7 w-7 cursor-pointer hover:text-gray-100"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
      </svg>
      <span class="font-medium">00:30</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-7 w-7 cursor-pointer hover:text-gray-100"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
        />
      </svg>
    </div>
    <!-- BOTTOM ICONS -->
    <div class="absolute bottom-6 left-0 right-0 flex justify-center py-5">
      <div
        class="mr-2 cursor-pointer rounded-full bg-gray-700 p-5 text-white transition-all duration-150 ease-linear hover:bg-gray-800"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-8 w-8"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"
          />
        </svg>
      </div>
      <div
        class="ml-2 cursor-pointer rounded-full bg-red-500 p-5 text-white transition-all duration-150 ease-linear hover:bg-red-600"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-8 w-8"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
          />
        </svg>
      </div>
    </div>
  </div>
</div>

How to create a A call from Lisa ("BlackPink") UI component with Tailwind CSS?

To create a call from Lisa ("BlackPink") UI component with Tailwind CSS, follow these steps:

  1. Create an HTML file and add the following code:
<div class="bg-gray-900 h-screen flex flex-col justify-center items-center">
  <img src="https://i.imgur.com/3OvLZ3F.jpg" class="absolute inset-0 w-full h-full object-cover" alt="background image">
  <div class="bg-white rounded-full w-40 h-40 flex justify-center items-center">
    <img src="https://i.imgur.com/5u2GvT8.jpg" class="rounded-full w-36 h-36 object-cover" alt="profile picture">
  </div>
  <div class="mt-4 text-white text-2xl font-bold">Lisa</div>
  <div class="mt-2 text-white text-lg font-medium">Calling...</div>
  <div class="mt-8 text-white text-3xl font-bold">00:00</div>
  <div class="mt-8">
    <button class="bg-red-600 text-white px-8 py-4 rounded-full shadow-lg font-bold">End Call</button>
  </div>
</div>
  1. Add the Tailwind CSS CDN link to the head of your HTML file:
<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
  1. Open your HTML file in a web browser to see the call from Lisa ("BlackPink") UI component.

Conclusion

In this article, we explored how to use Tailwind CSS to create a call from Lisa ("BlackPink") UI component. We discussed the benefits of using Tailwind CSS and provided the source code and preview of the UI component. We also provided step-by-step instructions on how to create the UI component with Tailwind CSS. With these ideas, you can now build your own UI components with Tailwind CSS like a pro.