- Published on
6 Critical Skills To Make A Free Tailwind CSS Boxed Layout Component With Tailwind CSS Remarkably Well
- What is Tailwind CSS?
- The description of Free Tailwind CSS Boxed Layout Component ui component
- Why use Tailwind CSS to build a Free Tailwind CSS Boxed Layout Component ui component?
- The preview of Free Tailwind CSS Boxed Layout Component ui component
- The source code of Free Tailwind CSS Boxed Layout Component ui component
- How to build a Free Tailwind CSS Boxed Layout Component with Tailwind CSS?
- Install tailwind css of verion 2.2.19
- All the unility class needed to build a Free Tailwind CSS Boxed Layout Component component
- 106 steps to build a Free Tailwind CSS Boxed Layout Component component with Tailwind CSS
- Conclusion
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 Free Tailwind CSS Boxed Layout Component ui component
Tailwind box layout components are designed to give users a headstart with application layout. find more free and premium tailwind css components at www.tailwinduikit.com
Why use Tailwind CSS to build a Free Tailwind CSS Boxed Layout Component ui component?
- It can make the building process of Free Tailwind CSS Boxed Layout Component ui component faster and more easily.
- Enables building complex responsive layouts and components freely.
- Minimum lines of CSS code in Free Tailwind CSS Boxed Layout Component component file.
The preview of Free Tailwind CSS Boxed Layout Component ui component
Free download of the Free Tailwind CSS Boxed Layout Component's source code
The source code of Free Tailwind CSS Boxed Layout Component ui component
<div class="h-full w-full absolute">
<!-- Navigation starts -->
<!-- Mobile -->
<!--- more free and premium Tailwind CSS components at https://tailwinduikit.com/ --->
<div id="mobile-nav" class="w-full xl:hidden h-full absolute z-40">
<div class="bg-gray-800 opacity-50 inset-0 fixed w-full h-full" onclick="sidebarHandler(false)"></div>
<div class="w-64 z-20 absolute left-0 z-40 top-0 bg-white shadow flex-col justify-between transition duration-150 ease-in-out h-full">
<div class="flex flex-col justify-between h-full">
<div class="px-6 pt-4 overflow-y-auto">
<div class="flex items-center justify-between">
<div aria-label="Home" role="img" class="flex items-center">
<svg enable-background="new 0 0 300 300" height="43" viewBox="0 0 300 300" width="43" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path
fill="#4c51bf"
d="m234.735 35.532c-8.822 0-16 7.178-16 16s7.178 16 16 16 16-7.178 16-16-7.178-16-16-16zm0 24c-4.412 0-8-3.588-8-8s3.588-8 8-8 8 3.588 8 8-3.588 8-8 8zm-62.529-14c0-2.502 2.028-4.53 4.53-4.53s4.53 2.028 4.53 4.53c0 2.501-2.028 4.529-4.53 4.529s-4.53-2.027-4.53-4.529zm89.059 60c0 2.501-2.028 4.529-4.53 4.529s-4.53-2.028-4.53-4.529c0-2.502 2.028-4.53 4.53-4.53s4.53 2.029 4.53 4.53zm-40.522-5.459-88-51.064c-1.242-.723-2.773-.723-4.016 0l-88 51.064c-1.232.715-1.992 2.033-1.992 3.459v104c0 1.404.736 2.705 1.938 3.428l88 52.936c.635.381 1.35.572 2.062.572s1.428-.191 2.062-.572l88-52.936c1.201-.723 1.938-2.023 1.938-3.428v-104c0-1.426-.76-2.744-1.992-3.459zm-90.008-42.98 80.085 46.47-52.95 31.289-23.135-13.607v-21.713c0-2.209-1.791-4-4-4s-4 1.791-4 4v21.713l-26.027 15.309c-1.223.719-1.973 2.029-1.973 3.447v29.795l-52 30.727v-94.688zm0 198.707-80.189-48.237 51.467-30.412 24.723 14.539v19.842c0 2.209 1.791 4 4 4s4-1.791 4-4v-19.842l26.027-15.307c1.223-.719 1.973-2.029 1.973-3.447v-31.667l52-30.728v94.729z"
></path>
</g>
</svg>
<p class="text-bold md:text2xl text-base pl-3 text-gray-800">The North</p>
</div>
<button id="cross" class="hidden text-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-800 rounded" onclick="sidebarHandler(false)">
<svg aria-label="close sidebar" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
</button>
</div>
<ul class="f-m-m">
<li class="text-white pt-8">
<div class="flex items-center">
<div class="md:w-6 md:h-6 w-5 h-5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
<path d="M7.16667 3H3.83333C3.3731 3 3 3.3731 3 3.83333V7.16667C3 7.6269 3.3731 8 3.83333 8H7.16667C7.6269 8 8 7.6269 8 7.16667V3.83333C8 3.3731 7.6269 3 7.16667 3Z" stroke="#667EEA" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7.16667 11.6667H3.83333C3.3731 11.6667 3 12.0398 3 12.5V15.8333C3 16.2936 3.3731 16.6667 3.83333 16.6667H7.16667C7.6269 16.6667 8 16.2936 8 15.8333V12.5C8 12.0398 7.6269 11.6667 7.16667 11.6667Z" stroke="#667EEA" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" />
<path d="M16.1667 11.6667H12.8333C12.3731 11.6667 12 12.0398 12 12.5V15.8334C12 16.2936 12.3731 16.6667 12.8333 16.6667H16.1667C16.6269 16.6667 17 16.2936 17 15.8334V12.5C17 12.0398 16.6269 11.6667 16.1667 11.6667Z" stroke="#667EEA" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" />
<path d="M16.1667 3H12.8333C12.3731 3 12 3.3731 12 3.83333V7.16667C12 7.6269 12.3731 8 12.8333 8H16.1667C16.6269 8 17 7.6269 17 7.16667V3.83333C17 3.3731 16.6269 3 16.1667 3Z" stroke="#667EEA" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<a href="javascript:void(0)" class="text-indigo-500 ml-3 text-lg">Dashboard</a>
</div>
</li>
<li class="text-gray-700 pt-8">
<div class="flex items-center">
<div class="flex items-center">
<div class="md:w-6 md:h-6 w-5 h-5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none">
<path
d="M2.33333 4.83333H4.83333C5.05435 4.83333 5.26631 4.74554 5.42259 4.58926C5.57887 4.43298 5.66667 4.22101 5.66667 4V3.16667C5.66667 2.72464 5.84226 2.30072 6.15482 1.98816C6.46738 1.67559 6.89131 1.5 7.33333 1.5C7.77536 1.5 8.19928 1.67559 8.51184 1.98816C8.8244 2.30072 9 2.72464 9 3.16667V4C9 4.22101 9.0878 4.43298 9.24408 4.58926C9.40036 4.74554 9.61232 4.83333 9.83333 4.83333H12.3333C12.5543 4.83333 12.7663 4.92113 12.9226 5.07741C13.0789 5.23369 13.1667 5.44565 13.1667 5.66667V8.16667C13.1667 8.38768 13.2545 8.59964 13.4107 8.75592C13.567 8.9122 13.779 9 14 9H14.8333C15.2754 9 15.6993 9.17559 16.0118 9.48816C16.3244 9.80072 16.5 10.2246 16.5 10.6667C16.5 11.1087 16.3244 11.5326 16.0118 11.8452C15.6993 12.1577 15.2754 12.3333 14.8333 12.3333H14C13.779 12.3333 13.567 12.4211 13.4107 12.5774C13.2545 12.7337 13.1667 12.9457 13.1667 13.1667V15.6667C13.1667 15.8877 13.0789 16.0996 12.9226 16.2559C12.7663 16.4122 12.5543 16.5 12.3333 16.5H9.83333C9.61232 16.5 9.40036 16.4122 9.24408 16.2559C9.0878 16.0996 9 15.8877 9 15.6667V14.8333C9 14.3913 8.8244 13.9674 8.51184 13.6548C8.19928 13.3423 7.77536 13.1667 7.33333 13.1667C6.89131 13.1667 6.46738 13.3423 6.15482 13.6548C5.84226 13.9674 5.66667 14.3913 5.66667 14.8333V15.6667C5.66667 15.8877 5.57887 16.0996 5.42259 16.2559C5.26631 16.4122 5.05435 16.5 4.83333 16.5H2.33333C2.11232 16.5 1.90036 16.4122 1.74408 16.2559C1.5878 16.0996 1.5 15.8877 1.5 15.6667V13.1667C1.5 12.9457 1.5878 12.7337 1.74408 12.5774C1.90036 12.4211 2.11232 12.3333 2.33333 12.3333H3.16667C3.60869 12.3333 4.03262 12.1577 4.34518 11.8452C4.65774 11.5326 4.83333 11.1087 4.83333 10.6667C4.83333 10.2246 4.65774 9.80072 4.34518 9.48816C4.03262 9.17559 3.60869 9 3.16667 9H2.33333C2.11232 9 1.90036 8.9122 1.74408 8.75592C1.5878 8.59964 1.5 8.38768 1.5 8.16667V5.66667C1.5 5.44565 1.5878 5.23369 1.74408 5.07741C1.90036 4.92113 2.11232 4.83333 2.33333 4.83333"
stroke="currentColor"
stroke-width="1"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<a href="javascript:void(0)" class="text-gray-700 ml-3 text-lg">Products</a>
</div>
<button id="chevronup" onclick="listHandler(true)" class="ml-4 focus:outline-none focus:ring-2 focus:ring-gray-500 rounded">
<svg aria-label="open products list" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down " width="14" height="14" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<polyline points="6 9 12 15 18 9" />
</svg>
</button>
<button id="chevrondown" onclick="listHandler(false)" class="hidden ml-4 focus:outline-none focus:ring-2 focus:ring-gray-500 rounded ">
<svg aria-label="close products list" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-up" width="14" height="14" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<polyline points="6 15 12 9 18 15" />
</svg>
</button>
</div>
<div id="list" class="hidden">
<ul class="my-3">
<li class="text-sm text-indigo-500 py-2 px-6"><a href="javascript:void(0)"> Best Sellers </a></li>
<li class="text-sm text-gray-800 hover:text-indigo-500 py-2 px-6"><a href="javascript:void(0)"> Out of Stock</a></li>
<li class="text-sm text-gray-800 hover:text-indigo-500 py-2 px-6"><a href="javascript:void(0)"> New Products</a></li>
</ul>
</div>
</li>
<li class="text-gray-800 pt-8">
<div class="flex items-center">
<div class="md:w-6 md:h-6 w-5 h-5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
<path d="M6.66667 13.3333L8.33334 8.33334L13.3333 6.66667L11.6667 11.6667L6.66667 13.3333Z" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" />
<path d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<a href="javascript:void(0)" class="text-gray-800 ml-3 text-lg">Performance</a>
</div>
</li>
<li class="text-gray-800 pt-8">
<div class="flex items-center">
<div class="flex items-center">
<div class="md:w-6 md:h-6 w-5 h-5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
<path d="M5.83333 6.66667L2.5 10L5.83333 13.3333" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" />
<path d="M14.1667 6.66667L17.5 10L14.1667 13.3333" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" />
<path d="M11.6667 3.33333L8.33333 16.6667" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<a href="javascript:void(0)" class="text-gray-800 ml-3 text-lg">Deliverables</a>
</div>
<div>
<button id="chevronup2" onclick="listHandler2(true)" class="ml-4 focus:outline-none focus:ring-2 focus:ring-gray-500 rounded">
<svg aria-label="open deliverables list" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="14" height="14" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<polyline points="6 9 12 15 18 9" />
</svg>
</button>
<button id="chevrondown2" onclick="listHandler2(false)" class="hidden ml-4 focus:outline-none focus:ring-2 focus:ring-gray-500 rounded">
<svg aria-label="open deliverables list" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-up" width="14" height="14" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<polyline points="6 15 12 9 18 15" />
</svg>
</button>
</div>
</div>
<div id="list2" class="hidden">
<ul class="my-3">
<li class="text-sm text-indigo-500 py-2 px-6"><a href="javascript:void(0)"> Best Sellers </a></li>
<li class="text-sm text-gray-800 hover:text-indigo-500 py-2 px-6"><a href="javascript:void(0)"> Out of Stock</a></li>
<li class="text-sm text-gray-800 hover:text-indigo-500 py-2 px-6"><a href="javascript:void(0)"> New Products</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div class="w-full">
<div class="flex justify-center mb-4 w-full px-6">
<div class="relative w-full">
<div class="text-gray-600 absolute ml-4 inset-0 m-auto w-4 h-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="16" height="16" viewBox="0 0 24 24" stroke-width="1" stroke="#A0AEC0" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<circle cx="10" cy="10" r="7"></circle>
<line x1="21" y1="21" x2="15" y2="15"></line>
</svg>
</div>
<input class="bg-gray-100 focus:outline-none rounded w-full text-sm text-gray-500 placeholder-gray-600 bg-gray-100 pl-10 py-2" type="text" placeholder="Search" />
</div>
</div>
<div class="border-t border-gray-300">
<div class="w-full flex items-center justify-between px-6 pt-1">
<div class="flex items-center">
<img alt="display avatar" role="img" src="https://tuk-cdn.s3.amazonaws.com/assets/components/boxed_layout/bl_1.png" class="w-8 h-8 rounded-md" />
<p class="text-gray-800 text-base leading-4 ml-2">Jane Doe</p>
</div>
<ul class="flex">
<li class="cursor-pointer text-white pt-5 pb-3">
<a href="javascript:void(0)">
<svg aria-label="open chats" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-messages" width="24" height="24" viewBox="0 0 24 24" stroke-width="1" stroke="#718096" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<path d="M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1 1v10"></path>
<path d="M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2"></path>
</svg>
</a>
</li>
<li class="cursor-pointer text-white pt-5 pb-3 pl-3">
<a href="javascript:void(0)">
<svg aria-label="open notifications" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bell" width="24" height="24" viewBox="0 0 24 24" stroke-width="1" stroke="#718096" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"></path>
<path d="M9 17v1a3 3 0 0 0 6 0v-1"></path>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile -->
<nav class="w-full mx-auto bg-white shadow">
<div class="container px-6 justify-between h-16 flex items-center lg:items-stretch mx-auto">
<div class="h-full flex items-center">
<div aria-label="Home" role="img" class="mr-10 flex items-center">
<svg id="logo" enable-background="new 0 0 300 300" height="44" viewBox="0 0 300 300" width="43" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path
fill="#4c51bf"
d="m234.735 35.532c-8.822 0-16 7.178-16 16s7.178 16 16 16 16-7.178 16-16-7.178-16-16-16zm0 24c-4.412 0-8-3.588-8-8s3.588-8 8-8 8 3.588 8 8-3.588 8-8 8zm-62.529-14c0-2.502 2.028-4.53 4.53-4.53s4.53 2.028 4.53 4.53c0 2.501-2.028 4.529-4.53 4.529s-4.53-2.027-4.53-4.529zm89.059 60c0 2.501-2.028 4.529-4.53 4.529s-4.53-2.028-4.53-4.529c0-2.502 2.028-4.53 4.53-4.53s4.53 2.029 4.53 4.53zm-40.522-5.459-88-51.064c-1.242-.723-2.773-.723-4.016 0l-88 51.064c-1.232.715-1.992 2.033-1.992 3.459v104c0 1.404.736 2.705 1.938 3.428l88 52.936c.635.381 1.35.572 2.062.572s1.428-.191 2.062-.572l88-52.936c1.201-.723 1.938-2.023 1.938-3.428v-104c0-1.426-.76-2.744-1.992-3.459zm-90.008-42.98 80.085 46.47-52.95 31.289-23.135-13.607v-21.713c0-2.209-1.791-4-4-4s-4 1.791-4 4v21.713l-26.027 15.309c-1.223.719-1.973 2.029-1.973 3.447v29.795l-52 30.727v-94.688zm0 198.707-80.189-48.237 51.467-30.412 24.723 14.539v19.842c0 2.209 1.791 4 4 4s4-1.791 4-4v-19.842l26.027-15.307c1.223-.719 1.973-2.029 1.973-3.447v-31.667l52-30.728v94.729z"
/>
</g>
</svg>
<h3 class="text-base text-gray-800 font-bold tracking-normal leading-tight ml-3 hidden lg:block">The North</h3>
</div>
<ul class="pr-12 xl:flex items-center h-full hidden">
<li class="hover:text-indigo-700 cursor-pointer h-full flex items-center text-sm text-indigo-700 tracking-normal border-b-2 border-indigo-700"><a href="javascript:void(0)"> Dashboard</a></li>
<li class="hover:text-indigo-700 cursor-pointer h-full flex items-center text-sm text-gry-800 mx-10 tracking-normal" ><a href="javascript:void(0)">Products</a></li>
<li class="hover:text-indigo-700 cursor-pointer h-full flex items-center text-sm text-gry-800 mr-10 tracking-normal"><a href="javascript:void(0)">Performance</a></li>
<li class="hover:text-indigo-700 cursor-pointer h-full flex items-center text-sm text-gray-800 tracking-normal"><a href="javascript:void(0)">Deliverables</a></li>
</ul>
</div>
<div class="h-full xl:flex items-center justify-end hidden">
<div class="w-full h-full flex items-center">
<div class="w-full pr-12 h-full flex items-center border-r">
<div class="relative w-full">
<div class="text-gray-600 absolute ml-3 inset-0 m-auto w-4 h-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<circle cx="10" cy="10" r="7" />
<line x1="21" y1="21" x2="15" y2="15" />
</svg>
</div>
<input class="border border-gray-100 focus:outline-none focus:border-indigo-700 w-56 rounded text-sm text-gray-500 placeholder-gray-600 bg-gray-100 pl-8 py-2" type="text" placeholder="Search" />
</div>
</div>
<div class="w-full h-full flex">
<div class="w-32 h-full flex items-center justify-center border-r cursor-pointer text-gray-600">
<a aria-label="show notifications" role="link" href="javascript:void(0)" class="cursor-pointer w-6 h-6 xl:w-auto xl:h-auto text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bell" width="28" height="28" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"></path>
<path d="M9 17v1a3 3 0 0 0 6 0v-1"></path>
</svg>
</a>
</div>
<div aria-haspopup="true" class="cursor-pointer w-full flex items-center justify-end relative" onclick="dropdownHandler(this)">
<button aria-haspopup="true" onclick="dropdownHandler(this)" class="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-800 rounded flex items-center" >
<img class="rounded-full h-10 w-10 object-cover" src="https://tuk-cdn.s3.amazonaws.com/assets/components/sidebar_layout/sl_1.png" alt="avatar" />
<p class="text-gray-800 text-sm ml-2">Jane Doe</p>
</button>
<ul class="p-2 w-40 border-r bg-white absolute rounded z-40 left-0 shadow mt-64 hidden">
<li class="cursor-pointer text-gray-600 text-sm leading-3 tracking-normal py-2 hover:text-indigo-700 focus:text-indigo-700 focus:outline-none">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<circle cx="12" cy="7" r="4" />
<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
</svg>
<a href="javascript:void(0)" class="ml-2">My Profile</a>
</div>
</li>
<li class="cursor-pointer text-gray-600 text-sm leading-3 tracking-normal mt-2 py-2 hover:text-indigo-700 focus:text-indigo-700 focus:outline-none flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-help" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<circle cx="12" cy="12" r="9" />
<line x1="12" y1="17" x2="12" y2="17.01" />
<path d="M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4" />
</svg>
<a href="javascript:void(0)" class="ml-2">Help Center</a>
</li>
<li class="cursor-pointer text-gray-600 text-sm leading-3 tracking-normal mt-2 py-2 hover:text-indigo-700 flex items-center focus:text-indigo-700 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-settings" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<circle cx="12" cy="12" r="3" />
</svg>
<a href="javascript:void(0)" class="ml-2">Account Settings</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="visible xl:hidden flex items-center">
<div>
<button id="menu" class="text-gray-800 rounded focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-800" onclick="sidebarHandler(true) ">
<svg aria-label="open sidebar menu" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<line x1="4" y1="6" x2="20" y2="6" />
<line x1="4" y1="12" x2="20" y2="12" />
<line x1="4" y1="18" x2="20" y2="18" />
</svg>
</button>
</div>
</div>
</div>
</nav>
<!-- Navigation ends -->
<!-- Page title starts -->
<div class="my-6 lg:my-12 container px-6 mx-auto flex flex-col lg:flex-row items-start lg:items-center justify-between pb-4 border-b border-gray-300">
<div>
<h4 class="text-2xl font-bold leading-tight text-gray-800">User Profile</h4>
<ul class="flex flex-col md:flex-row items-start md:items-center text-gray-600 text-sm mt-3">
<li class="flex items-center mr-3 mt-3 md:mt-0">
<span class="mr-2">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-paperclip" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<path d="M15 7l-6.5 6.5a1.5 1.5 0 0 0 3 3l6.5 -6.5a3 3 0 0 0 -6 -6l-6.5 6.5a4.5 4.5 0 0 0 9 9 l6.5 -6.5" />
</svg>
</span>
<span>Active</span>
</li>
<li class="flex items-center mr-3 mt-3 md:mt-0">
<span class="mr-2">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trending-up" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<polyline points="3 17 9 11 13 15 21 7" />
<polyline points="14 7 21 7 21 14" />
</svg>
</span>
<span> Trending</span>
</li>
<li class="flex items-center mt-3 md:mt-0">
<span class="mr-2">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plane-departure" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<path d="M15 12h5a2 2 0 0 1 0 4h-15l-3 -6h3l2 2h3l-2 -7h3z" transform="rotate(-15 12 12) translate(0 -1)" />
<line x1="3" y1="21" x2="21" y2="21" />
</svg>
</span>
<span>Started on 29 Jan 2020</span>
</li>
</ul>
</div>
<div class="mt-6 lg:mt-0">
<button class="mx-2 my-2 bg-white transition duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-700 focus:ring-white hover:bg-gray-100 rounded text-indigo-700 px-6 py-2 text-sm">Back</button>
<button class="transition duration-150 ease-in-out hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 border bg-indigo-700 rounded text-white px-8 py-2 text-sm">Edit Profile</button>
</div>
</div>
<!-- Page title ends -->
<div class="container mx-auto px-6">
<!-- Remove class [ h-64 ] when adding a card block -->
<!-- Remove class [ border-dashed border-2 border-gray-300 ] to remove dotted border -->
<div class="w-full h-64 rounded border-dashed border-2 border-gray-300">
<!-- Place your content here -->
</div>
</div>
</div> <script>
function dropdownHandler(element) {
let single = element.getElementsByTagName("ul")[0];
single.classList.toggle("hidden");
}
function MenuHandler(el, val) {
let MainList = el.parentElement.getElementsByTagName("ul")[0];
let closeIcon = el.parentElement.getElementsByClassName("close-m-menu")[0];
let showIcon = el.parentElement.getElementsByClassName("show-m-menu")[0];
if (val) {
MainList.classList.remove("hidden");
el.classList.add("hidden");
closeIcon.classList.remove("hidden");
} else {
showIcon.classList.remove("hidden");
MainList.classList.add("hidden");
el.classList.add("hidden");
}
}
let sideBar = document.getElementById("mobile-nav");
let menu = document.getElementById("menu");
let cross = document.getElementById("cross");
sideBar.style.transform = "translateX(-100%)";
const sidebarHandler = (check) => {
if (check) {
sideBar.style.transform = "translateX(0px)";
menu.classList.add("hidden");
cross.classList.remove("hidden");
} else {
sideBar.style.transform = "translateX(-100%)";
menu.classList.remove("hidden");
cross.classList.add("hidden");
}
};
let list = document.getElementById("list");
let chevrondown = document.getElementById("chevrondown");
let chevronup = document.getElementById("chevronup");
const listHandler = (check) => {
if (check) {
list.classList.remove("hidden");
chevrondown.classList.remove("hidden");
chevronup.classList.add("hidden");
} else {
list.classList.add("hidden");
chevrondown.classList.add("hidden");
chevronup.classList.remove("hidden");
}
};
let list2 = document.getElementById("list2");
let chevrondown2 = document.getElementById("chevrondown2");
let chevronup2 = document.getElementById("chevronup2");
const listHandler2 = (check) => {
if (check) {
list2.classList.remove("hidden");
chevrondown2.classList.remove("hidden");
chevronup2.classList.add("hidden");
} else {
list2.classList.add("hidden");
chevrondown2.classList.add("hidden");
chevronup2.classList.remove("hidden");
}
};
</script>
How to build a Free Tailwind CSS Boxed Layout Component with Tailwind CSS?
Install tailwind css of verion 2.2.19
Use the script html tag to import the script of Tailwind CSS of the version 2.2.19
<script src="https://cdn.tailwindcss.com"></script>
All the unility class needed to build a Free Tailwind CSS Boxed Layout Component component
h-fullw-fullabsolutexl:hiddenz-40bg-gray-800fixedw-64z-20left-0top-0bg-whiteflex-colflexpx-6pt-4overflow-y-autotext-boldtext-basepl-3text-gray-800hiddentext-whitept-8md:w-6md:h-6w-5h-5text-indigo-500ml-3text-lgtext-gray-700ml-4my-3text-smpy-2hover:text-indigo-500mb-4relativetext-gray-600m-autow-4h-4bg-gray-100text-gray-500pl-10border-tborder-gray-300pt-1w-8h-8ml-2pt-5pb-3mx-autoh-16mr-10lg:blockpr-12xl:flexhover:text-indigo-700text-indigo-700border-b-2border-indigo-700text-gry-800mx-10border-rborder-gray-100focus:border-indigo-700w-56pl-8w-32w-6h-6xl:w-autoxl:h-autoh-10w-10p-2w-40mt-64focus:text-indigo-700mt-2visiblemy-6lg:my-12lg:flex-rowpb-4border-btext-2xlmd:flex-rowmt-3mr-3md:mt-0mr-2mt-6lg:mt-0mx-2my-2hover:bg-gray-100hover:bg-indigo-600bg-indigo-700px-8h-64border-dashedborder-2
106 steps to build a Free Tailwind CSS Boxed Layout Component component with Tailwind CSS
Use
h-fullto set an element’s height to 100% of its parent, as long as the parent has a defined height.Use
w-fullto set an element to a 100% based width.Use
absoluteto position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.Use
hiddento set an element to display: none and remove it from the page layout at only extremely large screen sizes.Control the stack order (or three-dimensional positioning) of an element to 40 in Tailwind, regardless of order it has been displayed, using the
z-40utilities.Control the background color of an element to gray-800 using the
bg-gray-800utilities.Use
fixedto position an element relative to the browser window.Use
w-64to set an element to a fixed width(16rem).Control the stack order (or three-dimensional positioning) of an element to 20 in Tailwind, regardless of order it has been displayed, using the
z-20utilities.Use the
left-0utilities to set the left position of a positioned element to 0rem.Use the
top-0utilities to set the top position of a positioned element to 0rem.Control the background color of an element to white using the
bg-whiteutilities.Use
flexto create a block-level flex container.Use
flexto create a block-level flex container.Control the horizontal padding of an element to 1.5rem using the
px-6utilities.Control the padding on top side of an element to 1rem using the
pt-4utilities.Use
overflow-y-autoto allow vertical scrolling if needed.Control the text color of an element to bold using the
text-boldutilities.Control the text color of an element to base using the
text-baseutilities.Adjust the left padding of an element to 0.75rem using the
pl-3utilities classControl the text color of an element to gray-800 using the
text-gray-800utilities.Use
hiddento set an element to display: none and remove it from the page layout.Control the text color of an element to white using the
text-whiteutilities.Control the padding on top side of an element to 2rem using the
pt-8utilities.Use
md:w-6to set an element to a fixed width(1.5rem) at only medium screen sizes.Use
md:h-6to set an element to a fixed height(1.5rem) at only medium screen sizes.Use
w-5to set an element to a fixed width(1.25rem).Use
h-5to set an element to a fixed height(1.25rem).Control the text color of an element to indigo-500 using the
text-indigo-500utilities.Control the margin on left side of an element to 0.75rem using the
ml-3utilities.Control the text color of an element to lg using the
text-lgutilities.Control the text color of an element to gray-700 using the
text-gray-700utilities.Control the margin on left side of an element to 1rem using the
ml-4utilities.Control the vertical margin of an element to 0.75rem using the
my-3utilities.Control the text color of an element to sm using the
text-smutilities.Control the vertical padding of an element to 0.5rem using the
py-2utilities.Control the text color of an element to indigo-500 on hover using the
hover:text-indigo-500utilities.Control the margin on bottom side of an element to 1rem using the
mb-4utilities.Use
relativeto position an element according to the normal flow of the document.Control the text color of an element to gray-600 using the
text-gray-600utilities.Control the margin on all sides of an element to auto using the
m-autoutilities.Use
w-4to set an element to a fixed width(1rem).Use
h-4to set an element to a fixed height(1rem).Control the background color of an element to gray-100 using the
bg-gray-100utilities.Control the text color of an element to gray-500 using the
text-gray-500utilities.Adjust the left padding of an element to 2.5rem using the
pl-10utilities classControl the border color of an element to t using the
border-tutilities.Control the border color of an element to gray-300 using the
border-gray-300utilities.Control the padding on top side of an element to 0.25rem using the
pt-1utilities.Use
w-8to set an element to a fixed width(2rem).Use
h-8to set an element to a fixed height(2rem).Control the margin on left side of an element to 0.5rem using the
ml-2utilities.Control the padding on top side of an element to 1.25rem using the
pt-5utilities.Control the padding on bottom side of an element to 0.75rem using the
pb-3utilities.Control the horizontal margin of an element to auto using the
mx-autoutilities.Use
h-16to set an element to a fixed height(4rem).Control the margin on right side of an element to 2.5rem using the
mr-10utilities.Use
inlineutilities to put the element on its own line and fill its parent at only large screen sizes.Control the padding on right side of an element to 3rem using the
pr-12utilities.Use
flexto create a block-level flex container at only extremely large screen sizes.Control the text color of an element to indigo-700 on hover using the
hover:text-indigo-700utilities.Control the text color of an element to indigo-700 using the
text-indigo-700utilities.Control the border color of an element to b-2 using the
border-b-2utilities.Control the border color of an element to indigo-700 using the
border-indigo-700utilities.Control the text color of an element to gry-800 using the
text-gry-800utilities.Control the horizontal margin of an element to 2.5rem using the
mx-10utilities.Control the border color of an element to r using the
border-rutilities.Control the border color of an element to gray-100 using the
border-gray-100utilities.Control the border color of an element to indigo-700 using the
focus:border-indigo-700utilities on focus.Use
w-56to set an element to a fixed width(14rem).Adjust the left padding of an element to 2rem using the
pl-8utilities classUse
w-32to set an element to a fixed width(8rem).Use
w-6to set an element to a fixed width(1.5rem).Use
h-6to set an element to a fixed height(1.5rem).The
w-autoutility can be useful if you need to remove an element’s assigned width under a specific condition, like at a particular breakpoint.Use
xl:h-autoto set an element to a fixed height(auto) at only extremely large screen sizes.Use
h-10to set an element to a fixed height(2.5rem).Use
w-10to set an element to a fixed width(2.5rem).Control the padding on all sides of an element to 0.5rem using the
p-2utilities.Use
w-40to set an element to a fixed width(10rem).Control the margin on top side of an element to 16rem using the
mt-64utilities.Control the text color of an element to indigo-700 on focus using the
focus:text-indigo-700utilities.Control the margin on top side of an element to 0.5rem using the
mt-2utilities.Use
visibleto make an element visible. This is mostly useful for undoing the invisible utility at different screen sizes.Control the vertical margin of an element to 1.5rem using the
my-6utilities.Control the vertical margin of an element to 3rem at only large screen sizes using the
lg:my-12utilities.Use
flexto create a block-level flex container at only large screen sizes.Control the padding on bottom side of an element to 1rem using the
pb-4utilities.Control the border color of an element to b using the
border-butilities.Control the text color of an element to 2xl using the
text-2xlutilities.Use
flexto create a block-level flex container at only medium screen sizes.Control the margin on top side of an element to 0.75rem using the
mt-3utilities.Control the margin on right side of an element to 0.75rem using the
mr-3utilities.Control the margin on top side of an element to 0rem at only medium screen sizes using the
md:mt-0utilities.Control the margin on right side of an element to 0.5rem using the
mr-2utilities.Control the margin on top side of an element to 1.5rem using the
mt-6utilities.Control the margin on top side of an element to 0rem at only large screen sizes using the
lg:mt-0utilities.Control the horizontal margin of an element to 0.5rem using the
mx-2utilities.Control the vertical margin of an element to 0.5rem using the
my-2utilities.Control the background color of an element to gray-100 using the
hover:bg-gray-100utilities on hover.Control the background color of an element to indigo-600 using the
hover:bg-indigo-600utilities on hover.Control the background color of an element to indigo-700 using the
bg-indigo-700utilities.Control the horizontal padding of an element to 2rem using the
px-8utilities.Use
h-64to set an element to a fixed height(16rem).Control the border color of an element to dashed using the
border-dashedutilities.Control the border color of an element to 0.5rem using the
border-2utilities.
Conclusion
The above is a step-by-step tutorial on how to use Tailwind CSS to build a Free Tailwind CSS Boxed Layout Component components, learn and follow along to implement your own components.