Published on

The Ninja Guide To How To Build A Multiple Views With Collapsing With Tailwind CSS Better

Tags
Widget
Multiple Views With Collapsing

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that focuses on creating personalized user interfaces quickly. It can gives you all the building blocks you are able to create personalized designs without having to fight to override irritating opinionated styles. Also, Tailwind CSS is a highly configurable, low-level CSS framework.

The description of Multiple Views With Collapsing ui component

Multiple views to display multiple pages in one card using the button bar

Why use Tailwind CSS to make a Multiple Views With Collapsing ui component?

  • It can make the building process of Multiple Views With Collapsing ui component faster and more easily.
  • Enables building complex responsive layouts and components freely.
  • Minimum lines of CSS code in Multiple Views With Collapsing component file.

The preview of Multiple Views With Collapsing ui component

Free download of the Multiple Views With Collapsing's source code

The source code of Multiple Views With Collapsing ui component

<div class="w-full flex justify-center my-32 py-6">
        <div class="w-3/4">
            <div class="w-full flex flex-col md:flex-row rounded overflow-hidden shadow-xl">
                
                <div class="w-full md:w-1/4 h-auto">
                    <div class="top flex items-center px-5 h-16 bg-gray-700 text-white">
                        <div class="ml-3 flex flex-col text-xl">
                            M.Hard
                        </div>
                    </div>
                    <div class="bg-gray-400 w-full h-full sm:flex md:block">
                        <button id="button-1" onclick="showView(1)" class="w-full flex justify-between items-center px-5 py-2 hover:bg-gray-500 cursor-pointer focus:outline-none">
                            <span><i class="fa fa-inbox w-6"></i>View 1</span>
                        </button>
                        <button id="button-2" onclick="showView(2)" class="w-full flex justify-between items-center px-5 py-2 hover:bg-gray-500 cursor-pointer focus:outline-none">
                            <span><i class="fa fa-envelope w-6"></i>View 2</span>
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24">
                                <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
                            </svg>
                        </button>
                        <button id="button-3" onclick="showView(3)" class="w-full flex justify-between items-center px-5 py-2 hover:bg-gray-500 cursor-pointer focus:outline-none">
                            <span><i class="fa fa-bookmark w-6"></i>View 3</span>
                        </button>
                        <button id="button-4" onclick="showView(4)" class="w-full flex justify-between items-center px-5 py-2 hover:bg-gray-500 cursor-pointer focus:outline-none">
                            <span><i class="fa fa-trash w-6"></i>View 4</span>
                            <span class="text-xs bg-gray-800 px-1 rounded text-white">4</span>
                        </button>
                    </div>
                </div>
                

                <div class="w-full md:w-3/4">
                    <div class="top flex items-center px-5 h-16 bg-gray-600 text-white text-2xl">
                        <div id="title-1" class="hidden">
                            title-1
                        </div>
                        <div id="title-2" class="hidden">
                            title-2
                        </div>
                        <div id="title-3" class="hidden">
                            title-3
                        </div>
                        <div id="title-4" class="hidden">
                            title-4
                        </div>
                    </div>
                    <div class="w-full px-5 py-3 max-h-screen overflow-y-auto">
                        <div id="view-1" class="hidden">
                            view-1
                            <hr class="my-2 border-gray-500">
                            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis animi quos sequi, quia nulla similique!
                             Minima tempore dolor neque vero harum quisquam, dolorem magni numquam incidunt at fugiat, dolores voluptas?
                            <hr class="my-2 border-gray-500">
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita sequi quae dignissimos omnis aliquam, corrupti corporis.
                             Sequi esse voluptatem, deserunt aliquam, nemo minus neque cumque autem, dolorem provident porro recusandae.
                        </div>
                        <div id="view-2" class="hidden">
                            view-2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos officia qui facilis consequatur nisi quas sequi placeat veniam pariatur
                             fuga! Quos libero nam ad reprehenderit distinctio deleniti necessitatibus! Sint, soluta.
                        </div>
                        <div id="view-3" class="hidden">
                            view-3
                        </div>
                        <div id="view-4" class="hidden">
                            view-4
                            <hr class="my-2 border-gray-500">
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor ratione minima praesentium, unde maxime nisi maiores temporibus fugit!
                             Ducimus aliquam commodi autem minima repudiandae dolorum aut sit dolorem laudantium odit.
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    
    <script>
        var activeClasses = ["bg-gray-500","border-l-4","pl-4","border-gray-700"];
        var lastId = null;
        showView(1)

        function showView(id) {
            if(id == null)return
            closeLast()
            document.getElementById('view-'+id).style.display = "block"
            document.getElementById('title-'+id).style.display = "block"
            document.getElementById('button-'+id).classList.add(...activeClasses)

            lastId = id;
        }

        function closeLast() {
            if(lastId == null)return
            
            document.getElementById('view-'+lastId).style.display = "none"
            document.getElementById('title-'+lastId).style.display = "none"
            document.getElementById('button-'+lastId).classList.remove(...activeClasses)
        }

        /* 
            //If you want to use your own identifiers replace js code

            var views = ['view-1','view-2','view-3','view-4']
            var titles = ['title-1','title-2','title-3','title-4']
            var buttons = ['button-1','button-2','button-3','button-4']
            var activeClasses = ["bg-gray-500","border-l-4","pl-4","border-gray-700"];
            close()
            showView(1)

            function showView(buttonId) {
                "use strict";

                close()
                document.getElementById(views[buttonId-1]).style.display = "block"
                document.getElementById(titles[buttonId-1]).style.display = "block"
                
                document.getElementById(buttons[buttonId -1]).classList.add(...activeClasses)
            }
            function close() {
                "use strict";
                
                views.forEach(view => {
                    document.getElementById(view).style.display = "none"
                });
                titles.forEach(title => {
                    document.getElementById(title).style.display = "none"
                });
                buttons.forEach(button => {
                    document.getElementById(button).classList.remove(...activeClasses)
                });
            }
        */
    </script>

How to make a Multiple Views With Collapsing with Tailwind CSS?

Install tailwind css of verion 1.4.6

Use the link html tag to import the stylesheet of Tailwind CSS of the version 1.4.6

<link href=https://unpkg.com/[email protected]/dist/tailwind.min.css rel="stylesheet">

All the unility class needed to make a Multiple Views With Collapsing component

  • w-full
  • flex
  • my-32
  • py-6
  • w-3/4
  • flex-col
  • md:flex-row
  • overflow-hidden
  • md:w-1/4
  • h-auto
  • px-5
  • h-16
  • bg-gray-700
  • text-white
  • ml-3
  • text-xl
  • bg-gray-400
  • h-full
  • sm:flex
  • md:block
  • py-2
  • hover:bg-gray-500
  • w-6
  • w-4
  • h-4
  • text-xs
  • bg-gray-800
  • px-1
  • md:w-3/4
  • bg-gray-600
  • text-2xl
  • hidden
  • py-3
  • max-h-screen
  • overflow-y-auto
  • my-2
  • border-gray-500

37 steps to make a Multiple Views With Collapsing component with Tailwind CSS

  1. Use w-full to set an element to a 100% based width.

  2. Use flex to create a block-level flex container.

  3. Control the vertical margin of an element to 8rem using the my-32 utilities.

  4. Control the vertical padding of an element to 1.5rem using the py-6 utilities.

  5. Use w-3/4 to set an element to a fixed width(3/4).

  6. Use flex to create a block-level flex container.

  7. Use flex to create a block-level flex container at only medium screen sizes.

  8. Use overflow-hidden to clip any content within an element that overflows the bounds of that element.

  9. Use md:w-1/4 to set an element to a fixed width(1/4) at only medium screen sizes.

  10. Use h-auto to set an element to a fixed height(auto).

  11. Control the horizontal padding of an element to 1.25rem using the px-5 utilities.

  12. Use h-16 to set an element to a fixed height(4rem).

  13. Control the background color of an element to gray-700 using the bg-gray-700 utilities.

  14. Control the text color of an element to white using the text-white utilities.

  15. Control the margin on left side of an element to 0.75rem using the ml-3 utilities.

  16. Control the text color of an element to xl using the text-xl utilities.

  17. Control the background color of an element to gray-400 using the bg-gray-400 utilities.

  18. Use h-full to set an element’s height to 100% of its parent, as long as the parent has a defined height.

  19. Use flex to create a block-level flex container at only small screen sizes.

  20. Use inline utilities to put the element on its own line and fill its parent at only medium screen sizes.

  21. Control the vertical padding of an element to 0.5rem using the py-2 utilities.

  22. Control the background color of an element to gray-500 using the hover:bg-gray-500 utilities on hover.

  23. Use w-6 to set an element to a fixed width(1.5rem).

  24. Use w-4 to set an element to a fixed width(1rem).

  25. Use h-4 to set an element to a fixed height(1rem).

  26. Control the text color of an element to xs using the text-xs utilities.

  27. Control the background color of an element to gray-800 using the bg-gray-800 utilities.

  28. Control the horizontal padding of an element to 0.25rem using the px-1 utilities.

  29. Use md:w-3/4 to set an element to a fixed width(3/4) at only medium screen sizes.

  30. Control the background color of an element to gray-600 using the bg-gray-600 utilities.

  31. Control the text color of an element to 2xl using the text-2xl utilities.

  32. Use hidden to set an element to display: none and remove it from the page layout.

  33. Control the vertical padding of an element to 0.75rem using the py-3 utilities.

  34. Set the maximum width/height of an element using the max-h-screen utilities.

  35. Use overflow-y-auto to allow vertical scrolling if needed.

  36. Control the vertical margin of an element to 0.5rem using the my-2 utilities.

  37. Control the border color of an element to gray-500 using the border-gray-500 utilities.

Conclusion

The above is a step-by-step tutorial on how to use Tailwind CSS to make a Multiple Views With Collapsing components, learn and follow along to implement your own components.