How to create a Luminescence Account Pop-up Using TailwindCSS
Tags: webdev, tailwindcss, html
Published: 2023-03-13 11:00:00


![Design inspired from [icodethis](icodethis.com) platform](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bo8y5kw6bb5w1scdsz2x.png)

## Introduction

Tailwind is a CSS framework that **provides us with single-purpose utility classes which are opinionated for the most part, and which help us design our web pages from right inside our markup or.** **js/**.

This utility-first framework makes our life very simple when it comes to executing designs, and its power is best appreciated in a large project.

A popup is **a window that appears in the user interface without an intentional action from the user.** Pop-ups are used primarily by marketers to promote offers and generate leads, but can also alert users of other things like cookie use.

In Our situation, we won't be marketing nor promoting anything, we will instead popup Account details and settings.

Let's build this.


![Demo of Account Pop-up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxorog82fff9za330lpm.gif)

## Understanding the Task

We will be building an Account Pop-up. Basically, it consists of two parts, The Pop-up, and the Pop-up trigger (The component triggering the popup to show and disappear).


![Showing Different Sections](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7wwavx0fn5hlzbscbms.png)

## Structure of Code

Our code will be divided into two parts. we will have the HTML part, with all the styling done with TailwindCSS of course, then will add some small Javascript functionalities to make our pop-up show when triggered. The Javascript will be very small and straight to the point.


![Different Parts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2bb74gsrjxn16i39c4x9.png)

## HTML + TailwindCSS

As discussed earlier on, our HTML code will be principally divided into two(2). The Pop-up and the trigger.

The root code of our work doesn't really change. This is how it looks like

```xml
<body>
<!-- First Layer -->
<div>
<!-- Second Layer -->
    <div>
            <!-- Pop-up -->
            <div></div>
            <!-- Pop-up Trigger -->
            <div></div>

    </div>

</div>
</body>
```

Now let's build that pop-up

### Pop-up

```xml
<!-- Pop-up -->
<div id="popUp" class="hidden absolute -top-[14rem] -left-8 w-[17rem] h-[13rem] bg-slate-900 px-4 py-3 rounded-md text-white text-sm shadow-[0rem_0rem_0.5rem_0.1rem_rgb(6,182,212,1)] hover:shadow-[0rem_0rem_0.5rem_0.1rem_rgba(255,90,90,1)]">
                  <!-- Profile -->
   <div class="flex items-center gap-2">
      <div id="pic2" class="w-14 h-14 rounded-full bg-cyan-500 p-0.5">
         <img src="https://media.licdn.com/dms/image/D4E03AQFmXSJIdcnSuw/profile-displayphoto-shrink_400_400/0/1674906112256?e=1681948800&v=beta&t=aaLKSvU3uz2mKZDsgGyVGJgne2bV_RnuCWYNymz4vWI" alt="" class="h-full rounded-full">
          </div>
                  <!-- Profile Details-->
   <div class="mr-4">
        <h2 class="font-bold">Mbianou Bradon</h2>
        <p class="text-xs">@mbianou_bradon</p>
   </div>

  <div class="w-8 h-8 rounded-full border border-cyan-500 flex items-center justify-center cursor-pointer hover:border-rose-400">
      <i class="fa fa-check" aria-hidden="true"></i>
  </div>

</div>

<h2 class="cursor-pointer text-cyan-500 my-4 text-center"><i class="fa fa-plus" aria-hidden="true"></i> Connect other account</h2>
                  <!-- Navigations -->
 <div class="grid grid-cols-2 gap-4 [&>*]:flex [&>*]items-center [&>*]:gap-1 [&>*]:w-fit [&>*]:cursor-pointer [&>*]:justify-self-center [&>*:hover]:text-rose-400">
     <div>
        <div><i class="fa fa-life-ring" aria-hidden="true"></i>&nbsp;</div>
        <h2>Support</h2>
    </div>

    <div>
        <div><i class="fa fa-cog" aria-hidden="true"></i>&nbsp;</div>
        <h2>Settings</h2>
    </div>
    <div>
        <div><i class="fa fa-star" aria-hidden="true"></i>&nbsp;</div>
        <h2>Upgrade</h2>
    </div>
    <div>
        <div><i class="fa fa-sign-out" aria-hidden="true"></i>&nbsp;</div>
        <h2>Logout</h2>
        </div>
   </div>
</div>
```

We gave this container an id of ***popUp,*** I know, not creative at all, but I believe it's self-explanatory. Keep this id name in mind, as we are going to use it in the Javascript file a few lines down.

To this container, we gave a position of `absolute` and positioned it `top` with `-top-[14rem]` and `left` with `-left-8` . we also gave it a `width` of `w-[17rem]` and `height` of `h-[13rem]` . We gave it a `background-color` of `bg-slate-900`, a `padding-inline` of `px-4` and `padding-block` of `py-3`, this padding is just to give some space between the content, and the wall of the container. `border-radius` `rounded-md` for the rounded edges. And also applied that beautiful blue `box-shadow` using `shadow-[0rem_0rem_0.5rem_0.1rem_rgb(6,182,212,1)]` which changes pinkish on hover using `hover:shadow-[0rem_0rem_0.5rem_0.1rem_rgba(255,90,90,1)]`.

Those are the main styles applied to the pop-up container.

Moving deeper, we also styled the navigation part. Let's understand those styles together.

We change the display to a grid with 2 columns using `grid grid-cols-2` and a gap of `gap-4` . we made use of the Tailwindcss property **\[&&gt;\*\],** in order to target the inner elements of this container.

In order to use this property, you need to have a clear knowledge of the structure of your inner elements, so as to know how to target them.

The property **\[&&gt;\*\]** simply means *“select each child individually”*, this allows us to apply the same styling properties to all the immediate children.

To each child, we gave it a `width` and `height` of `w-fit` and `h-fit` respectively, we also gave each of them a `display` of `flex`, and align them along the cross-axis using `items-center`. We also centered the content using `justify-self-center` and also added a text color change to pink on hover using `text-rose-400`. I think these are the principal styling applied


![Pop-up Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bdozwpy2qex9tskyzvpz.gif)



Let's work on the second part of this HTML

### Pop-up Trigger (Profile)

```xml
<!-- Pop-up Trigger -->
<div id="profile" class="w-[13rem] h-[4.5rem] rounded-full bg-slate-900 flex items-center justify-center gap-3 cursor-pointer shadow-[0rem_0rem_0.5rem_0.1rem_rgb(6,182,212,1)] hover:shadow-[0rem_0rem_0.5rem_0.1rem_rgba(255,90,90,1)]">

 <div id="pic" class="w-14 h-14 rounded-full bg-cyan-500 p-0.5 hover:bg-rose-400">
     <img src="https://media.licdn.com/dms/image/D4E03AQFmXSJIdcnSuw/profile-displayphoto-shrink_400_400/0/1674906112256?e=1681948800&v=beta&t=aaLKSvU3uz2mKZDsgGyVGJgne2bV_RnuCWYNymz4vWI" alt="" class="h-full rounded-full">
 </div>

 <div class="text-white text-sm">
    <h2 class="font-bold">Mbianou Bradon</h2>
    <p class="text-xs">@mbianou_bradon</p>
 </div>

</div>
```

Similar to Pop-up, we gave this container an ***id="Profile",*** also keep this one somewhere, because we will be using it too soon.

For the styling, nothing new that we have not discussed yet, a `width` of `w-[13rem]` `height` of `h-[4.5rem]` `border-radius` of `rounded-full` and beautiful `box-shadow shadow-[0rem_0rem_0.5rem_0.1rem_rgb(6,182,212,1)]` that changes on hover `hover:shadow-[0rem_0rem_0.5rem_0.1rem_rgba(255,90,90,1)]`, yeah! Nothing really new.


![Pop-up Trigger](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jv6uiakm8lxpvbg7h645.gif)



Let's complete our styling by adding some properties to the different layers and the body too.

```xml
<body class="bg-slate-900 flex items-center justify-center min-h-screen">
<!-- First Layer -->
<div class="[&_*]:ease-linear [&_*]:transition-all [&_*]:duration-200">
<!-- Second Layer -->
    <div class="relative">
            <!-- Pop-up -->
            <div></div>
            <!-- Pop-up Trigger -->
            <div></div>

    </div>

</div>
</body>
```

And we are done here. We can now move to the Javascript part.

## JavaScript

As we agreed earlier on, we will be keeping the Javascript as small as possible, as this is not a javascript tutorial. For our project, this is how our javascript will look like

```javascript
const pop = document.getElementById("popUp")
const profile = document.getElementById("profile")
const pic = document.getElementById("pic")
const pic2 = document.getElementById("pic2")

profile.addEventListener("click", ()=>{

    if (pop.classList.contains("hidden")){
        setTimeout(()=>{
            pop.style.transform= "scale(1)"
            pop.style.opacity = "1",
            pop.style.display = "block"
            pop.classList.remove("hidden")
        }, 300)
    } else if (!pop.classList.contains("hidden")) {
        setTimeout(()=>{
            pop.style.opacity = "0",
            pop.style.tabSize = "0",
            pop.classList.add("hidden")
        },100)
    }
})

profile.addEventListener("mouseenter", ()=>{
    pic.classList.add("bg-rose-400");
    pic.classList.remove("bg-cyan-500")
})

profile.addEventListener("mouseleave", ()=>{
    pic.classList.remove("bg-rose-400");
    pic.classList.add("bg-cyan-500")
})

pop.addEventListener("mouseenter", ()=>{
    pic2.classList.add("bg-rose-400");
    pic2.classList.remove("bg-cyan-500")
})

pop.addEventListener("mouseleave", ()=>{
    pic2.classList.remove("bg-rose-400");
    pic2.classList.add("bg-cyan-500")
})
```

Principally what this code those is to make out Pop-up appear and disappear with some small animation(fade in and fade out effect).

Also, on hover, it changes the border of our profile images.

Yeah! That's pretty much it.


![End Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z28ox5eihpt2tm4tlwtk.png)



## **Conclusion**

We just built a very beautiful and responsive Account Pop-up.

We had the opportunity to also revise our knowledge of Vanilla CSS and apply the power of Box Shadow and also learn a bit more about TailwindCSS.

I hope like me you enjoyed building this wonderful component.

You can have a Live preview on [Codepen](https://codepen.io/mbianou-bradon/pen/YzOWjdb) or find the code on [GitHub](https://github.com/mbianou-bradon/icodethis-daily-ui-challenge/tree/main/public/February%202023/Account%20Pop)

Don’t hesitate to share with me if you were able to complete the tutorial on your end, I’d be happy to see any additions styling you added to your Pop-up.

If you have any worries or suggestions, don’t hesitate to leave them in the comment section! 😊

See ya! 👋