 platform](https://res.cloudinary.com/practicaldev/image/fetch/s--C_YvogsG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/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!
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
We will simply divide the overall design into 2 parts, we can call them Header and Navigation
Header
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
<body>
<!-- First Layer -->
<div>
<!-- Second Layer -->
<div>
<!-- Header -->
<div></div>
<!-- Navigation -->
<div></div>
</div>
</div>
</body>
Header
This is what we will be doing in this section, The first part of the card looks like this.
<!-- 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 [&>*] 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 [&>*] 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-14andh-14respectively.
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
<!-- 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
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
<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.
.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
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!
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 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 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! 👋
Top comments (0)