How to build an Mobile APP Card component with both Light and Dark Mode Using TailwindCSS
Tags: webdev, tailwindcss, html
Published: 2023-03-16 14:51:48


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


Being part of a digital era, we get into contact with a bit of technology every day of our life.

As a software developer, you get to build applications that can be accessed from different devices having of course different screens. So it is important to have a clear understanding of responsiveness. And also get used to building Mobile applications. Or better put, applications that can also be used on Mobile phones.

This tutorial doesn't really focus on how to build responsive designs or anything of such. Here we are going to build a Mobile APP card. More like a Mobile Navigation Menu.

Let's get Started!


![Demo of Mobile APP Card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtqc7e156wts0ykm25do.gif)



## **Understanding the task**

The component we are building is quite a simple one. We can build it as a whole, or separate it into 2 small parts so as to easily get to build it.

I always prefer to divide my work into smaller components, once done, I join all of them to build the bigger one. I call it the *“Divide and Conquer “* approach


![APP different Parts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbleatwhkvas5xq912ta.png)

We will simply divide the overall design into 2 parts, we can call them **Header** and **Navigation**

1. Header
    
2. Navigation
    

I couldn’t really get nicer names to name the different parts. 😅 Please let’s just take it like that.

## **Structure of Code**

As I always say, I have the same structure when it comes to designing components. Simply because I believe they somehow have the same root. 😃

This is how it goes

```xml
<body>
<!-- First Layer -->
 <div>
<!-- Second Layer -->
  <div>
        <!-- Header -->
            <div></div>

        <!-- Navigation -->
            <div></div>
  </div>
 </div>
    
</body>
```

## Header


![APP Header](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7z4emnf0k6h5jfh8b5sx.png)

This is what we will be doing in this section, The first part of the card looks like this.

```xml
 <!-- Second Layer -->
<div>
            <!-- Header -->
   <div class="text-white h-[12rem] bg-blue-600 py-4 px-4">
     <div class="flex items-center justify-between [&>*]:cursor-pointer">
            <!-- Mode Container -->
       <div id="mode" class="[&>*]:border [&>*]:border-white [&>*]:w-7 [&>*]:h-7 [&>*]:text-center [&>*]:pt-1 [&>*]:rounded-full">
        <div id="dark-mode"><iconify-icon icon="material-symbols:dark-mode"></iconify-icon></div>
        <div id="light-mode" class="hidden"><iconify-icon icon="material-symbols:light-mode"></iconify-icon></div>
     </div>
            <!-- 3-dots -->
     <div class="hover:-rotate-90"><iconify-icon icon="entypo:dots-three-horizontal"></iconify-icon></div>
</div>
            <!-- Logo container -->
 <div class="w-14 h-14 mx-auto">
   <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRm7kGqCkgYsmAB6DF1nIDCzi7FMcOOL047zeQjoq3fI8tmSWCfbfOu8-QfXJKu2-jH74&usqp=CAU" alt="" >
 </div>

 <div class="text-center">
     <h2 class="font-semibold mb-2">Untercom <span class="bg-blue-700 p-0.5 text-sm rounded">APP</span></h2>
     <p class="text-sm text-slate-200">Convert your hottest leads</p>
  </div>
 </div>
            <!-- Navigation -->
</div>
```

Now let’s understand the code we just wrote, I will specifically focus on the Mode Container and Logo container.

* **Mode Container:** No major styling was applied to the container, but we used it to style the icons within it using the **\[&&gt;\*\]** properties
    

If you are used to my posts, by now you surely know the meaning of `[&>*]` in tailwindcss.

But if you are new, 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-7` and `h-7` respectively, we also gave each of them a `border-radius` of `rounded-full`, and a border of `border`, and a `padding-block-start` of `pt-1`.

* **Logo Container:** This container contains the logo, in our situation, we have an image. We gave this container a width and height of `w-14` and `h-14` respectively.
    

Let's pay particular attention to the Mode container, this is because we gave this container an `id= "mode"`, and its content has IDs too, one has an id of **dark-mode** and **light-mode.** We are going to use them in the JavaScript file.

And that should be pretty much it for this section.😃

## Navigation

This section is simple and straight to the point

```xml
            <!-- Navigation  -->
<div id="menu" class="h-[18rem] bg-white px-4 py-14">
            <!-- Menu  -->
   <ul class=" flex flex-col items-center gap-y-5 h-full [&>*:hover]:underline">
      <li><a href="">About</a></li>
      <li><a href="">Setting</a></li>
      <li><a href="">Help</a></li>
   </ul>
            <!-- Button  -->
   <div id="app" class="border border-slate-300 rounded-md py-2 text-center shadow-inner shadow-slate-200 hover:text-white hover:bg-slate-900 cursor-pointer hover:shadow-md active:scale-95">
        <h2>Go to App</h2>
    </div>
</div>
```

The Navigation container has some styling height of `h-[18rem]`, `background-color` of `bg-white` `padding-inline` of `px-4`, and `padding-block` of `py-14`

For the menu section, it is just a flexbox, which has a flex-direction column and a vertical gap using `flex flex-col items-center gap-y-5`

The Button has a border of `border border-slate-300`, a border-radius of `rounded-md` and an inner box-shadow of `shadow-inner shadow-slate-200`, and on hover of this custom button, the text changes to `text-white`, background-color changes to `hover:bg-slate-900`


![App APP Navigation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e3mxy68z96afc3utzfwz.png)

## **Additional Stylings**

It’s important mentioning that we applied some extra stylings to center our component in the middle of the screen and also give it a given width

```xml
<body id="root" class="bg-slate-900 flex items-center justify-center min-h-screen [&_*]:transition-all [&_*]:ease-linear [&_*]:duration-200 ">
<!-- First Layer -->
    <div class="w-full max-w-[17rem] text-slate-900 rounded overflow-hidden">
<!-- Second Layer -->
      <div>
            <!-- Header -->
              <div></div>

               <!-- Navigation -->
              <div></div>
      </div>
  </div>
</body>
```

Now, Let’s make this component functional. Take note that we gave an `id= "root".`

For this tutorial, we will make special classes in our CSS file.

```css
.menuDarkMode {
  background: rgb(15 23 42/ 1);
  color: rgb(226 232 240/1);

}

.bodyDarkMode {
  background: white;
}

.gotoAppDarkMode {
  box-shadow: none;
}

.gotoAppDarkMode:hover {
    background: white;
    color: rgb(15 23 42/ 1);
}
```

## **Javascript**

The Javascript used here is pretty straightforward, as it just involves changing the content of an element. For this tutorial, this is what we have

```javascript
const root = document.getElementById("root")
const darkMode = document.getElementById("dark-mode")
const lightMode = document.getElementById("light-mode")
const menu = document.getElementById("menu")
const app = document.getElementById("app")

darkMode.addEventListener("click", ()=>{
    darkMode.classList.toggle("hidden")
    lightMode.classList.toggle("hidden")
    root.classList.add("bodyDarkMode")
    menu.classList.add("menuDarkMode")
    app.classList.add("gotoAppDarkMode")
})

lightMode.addEventListener("click", ()=>{
    darkMode.classList.toggle("hidden")
    lightMode.classList.toggle("hidden")
    root.classList.remove("bodyDarkMode")
    menu.classList.remove("menuDarkMode")
    app.classList.remove("gotoAppDarkMode")
})
```

And that’s all for this tutorial!


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

## **Conclusion**

We just built a simple Mobile APP Component and in the process, we also had more insight about Tailwindcss.

Many employers will need such components to be added to their websites, and for sure you know how simple it is to create it straight from your HTML document.

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

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 additional components and styling you added to your card.

If you have any worries or suggestions, don’t hesitate to bring them up! 😊

See ya! 👋