Published on

6 Easy Ways To Make A Hideable Notes (bottom Right Fixed Button) With Tailwind CSS

Tags
Widget
Hideable notes (bottom right fixed button)

In the world of FrontEnd development, creating user interfaces with beautiful and functional components is a crucial aspect. One of these components is the Hideable notes (bottom right fixed button) ui component. In this article, we will discuss how to create this component using Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes that can be used to style HTML elements. It is designed to be highly customizable and allows developers to create complex designs with ease. Tailwind CSS has gained popularity in recent years due to its simplicity and flexibility.

The description of Hideable notes (bottom right fixed button) ui component

The Hideable notes (bottom right fixed button) ui component is a small button that is fixed to the bottom right corner of the screen. When clicked, it reveals a small notes section that can be used to display important information or reminders. This component is commonly used in web applications and can be easily customized to fit the design of any website.

Why use Tailwind CSS to create a Hideable notes (bottom right fixed button) ui component?

Tailwind CSS provides a set of pre-defined classes that can be used to create the Hideable notes (bottom right fixed button) ui component quickly and easily. These classes can be customized to fit the design of any website and allow developers to create complex designs without writing custom CSS.

The preview of Hideable notes (bottom right fixed button) ui component.

To create the Hideable notes (bottom right fixed button) ui component, we will be using Tailwind CSS. The component will consist of a fixed button that is positioned at the bottom right corner of the screen. When clicked, it will reveal a small notes section that can be used to display important information or reminders.

Free download of the Hideable notes (bottom right fixed button)'s source code

The source code of Hideable notes (bottom right fixed button) ui component.

To create the Hideable notes (bottom right fixed button) ui component, we will be using HTML, CSS, and Tailwind CSS. The HTML will consist of a button element that is fixed to the bottom right corner of the screen. The CSS will be used to style the button and the notes section.

<div class="h-screen"> 
<div class="fixed bottom-0 right-0 w-16 h-16 mr-12 mb-8 cursor-pointer" id="box_btn">
                        <img src="https://devrolabs.com/image/tabnote.png">
                    </div>
                    <div id="note_box"
                        class="hidden rounded-lg bg-white shadow-xl fixed bottom-0 right-0 w-64 h-64 mr-12 mb-32">
                        <div class="bg-gray-900 text-white text-xl p-2 cursor-pointer rounded-lg" onclick="close_note()">NOTES</div>
                        <div class="p-2">
                            <textarea class="bg-gray-100 w-full h-32 p-2 focus:outline-none"
                                placeholder="Write here !"></textarea>
                        </div>
                        <button class="bg-teal-500 text-white p-2 mx-2 absolute right-0">SAVE</button>
                    </div>
</div>
  <script>
var note_box = document.getElementById("note_box");
        var box_btn = document.getElementById("box_btn");
                box_btn.addEventListener("click", () => {
            console.log("clicked");
            console.log(note_box.style.display);
            if (note_box.classList.contains("hidden"))
            {
                note_box.classList.remove("hidden");
            }
            else
                note_box.classList.add("hidden");
        });
        function close_note()
        {
            note_box.classList.add("hidden");
        }
</script>

How to create a Hideable notes (bottom right fixed button) with Tailwind CSS?

  1. Create a new HTML file and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hideable Notes</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
</head>
<body>
    <button class="fixed bottom-0 right-0 p-3 bg-blue-500 text-white rounded-full shadow-lg">
        <svg class="w-6 h-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
            <path d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
        </svg>
    </button>
    <div class="fixed bottom-0 right-0 p-4 bg-white rounded-lg shadow-lg hidden">
        <h2 class="text-lg font-bold mb-2">Notes</h2>
        <textarea class="w-full rounded-lg border border-gray-300 p-2"></textarea>
        <button class="mt-2 bg-blue-500 text-white px-4 py-2 rounded-lg">Save</button>
    </div>
</body>
</html>

  1. In the HTML code, we have added a button element with a fixed position at the bottom right corner of the screen. We have also added a div element that will contain the notes section. The notes section is hidden by default using the hidden class.

  2. We have used Tailwind CSS classes to style the button and the notes section. The bottom-0 and right-0 classes position the button at the bottom right corner of the screen. The p-3 class adds padding to the button. The bg-blue-500 and text-white classes set the background color and text color of the button. The rounded-full class adds rounded corners to the button. The shadow-lg class adds a shadow effect to the button.

  3. We have also used Tailwind CSS classes to style the notes section. The p-4 class adds padding to the notes section. The bg-white class sets the background color of the notes section. The rounded-lg class adds rounded corners to the notes section. The shadow-lg class adds a shadow effect to the notes section. The hidden class hides the notes section by default.

  4. We have also added a title and a textarea element to the notes section. The text-lg and font-bold classes style the title. The w-full, rounded-lg, and border classes style the textarea element.

  5. Finally, we have added a save button to the notes section. The bg-blue-500, text-white, px-4, py-2, and rounded-lg classes style the button.

Conclusion

In this article, we have discussed how to create a Hideable notes (bottom right fixed button) ui component using Tailwind CSS. We have seen how Tailwind CSS provides a set of pre-defined classes that can be used to create complex designs quickly and easily. By following the steps outlined in this article, you can create a Hideable notes (bottom right fixed button) ui component for your website with ease.