Mbianou Bradon

Posted on Mar 13, 2023 • Originally published at mbianoubradon.hashnode.dev

How to create a Luminescence Account Pop-up Using TailwindCSS

#webdev #tailwindcss #html

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.

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).

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.

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

<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

<!-- 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 [&>*], 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 [&>*] 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

Let's work on the second part of this HTML

Pop-up Trigger (Profile)

<!-- 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.

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

<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

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.

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 or find the code on GitHub

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! 👋