Published on

Advanced Guide: Make A RTL Dashboard With Tailwind CSS

Tags
AlpinejsNavigationsPages
RTL Dashboard

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 RTL Dashboard ui component

A simply rtl build with tailwindcss & alpine js

Why use Tailwind CSS to make a RTL Dashboard ui component?

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

The preview of RTL Dashboard ui component

Free download of the RTL Dashboard's source code

The source code of RTL Dashboard ui component

<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<div class="flex flex-row" x-data="{sidebarOpen : true}" dir="rtl">

    <aside x-show="sidebarOpen" style="display: none" class="bg-purple-700 w-16 sm:w-24 md:w-48 fixed flex flex-col top-0 right-0 w-14 hover:w-64 md:w-64 bg-gray-200 dark:bg-gray-900 h-full text-white transition-all duration-300 border-l-2 border-purple-900">

        <div class="top-0 bg-purple-600 h-14 px-4 py-4 border-b-4 border-purple-900 flex items-center md:space-x-2 md:space-x-reverse">
            <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg"/>
            <div class="hidden md:inline-flex">
                <span class="text-purple-300 font-bold ">رضا بیات</span>
                <span class="text-purple-400 font-bold ">(مدیر)</span>
            </div>
        </div>

        <div class="flex flex-col overflow-y-auto overflow-x-hidden ">
            <div class="" x-data="{openMenu:false}">
                <a href="#" @click="$event.preventDefault(); openMenu = !openMenu"
                class="flex justify-between h-12 px-4 py-3 text-purple-800 tracking-wider block bg-purple-400 font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-purple-300"
                role="button"
                >
                <div class="inline-flex space-x-2 space-x-reverse">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-speedometer2" viewBox="0 0 16 16">
                        <path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
                        <path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/>
                    </svg>
                    <span class="font-bold  hidden md:block" :class="{'text-purple-200':openMenu,'text-purple-600':!openMenu}">پیشخوان</span>
                </div>
                    <span class="" aria-hidden="true">
                        <svg class="w-4 h-4 transition-transform transform" :class="{ 'rotate-180': openMenu }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </span>
                </a>
                <div x-show="openMenu" style="display: none">
                    <a href="#" class="h-12 px-4 py-3 text-purple-800 tracking-wider block bg-purple-500 font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-purple-300">میزکار</a>
                    <a href="#" class="h-12 px-4 py-3 text-purple-800 tracking-wider block bg-purple-500 font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-purple-300">بازدید سایت</a>
                </div>
            </div>


            <div class="" x-data="{openMenu:false}">
                <a href="#" @click="$event.preventDefault(); openMenu = !openMenu"
                class="flex justify-between h-12 px-4 py-3 text-purple-800 tracking-wider block bg-purple-400 font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-purple-300"
                role="button"
                >

                <div class="inline-flex space-x-2 space-x-reverse">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-credit-card-2-front" viewBox="0 0 16 16">
                        <path d="M14 3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12zM2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2z"/>
                        <path d="M2 5.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1zm0 3a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z"/>
                    </svg>
                    <span class="font-bold hidden md:block" :class="{'text-purple-200':openMenu,'text-purple-600':!openMenu}">رسانه و نوشته‌ها</span>
                </div>

                    <span class="" aria-hidden="true">
                        <svg class="w-4 h-4 transition-transform transform" :class="{ 'rotate-180': openMenu }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </span>
                </a>
                <div x-show="openMenu" style="display: none">
                    <a href="#" class="h-12 px-4 py-3 text-purple-800 tracking-wider block bg-purple-500 font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-purple-300">نوشته‌ها</a>
                    <a href="#" class="h-12 px-4 py-3 text-purple-800 tracking-wider block bg-purple-500 font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-purple-300">چندرسانه‌ای</a>
                    <a href="#" class="h-12 px-4 py-3 text-purple-800 tracking-wider block bg-purple-500 font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-purple-300">برگه‌ها</a>
                </div>
            </div>


            <div class="" x-data="{openMenu:false}">
                <a href="#" @click="$event.preventDefault(); openMenu = !openMenu"
                class="flex justify-between h-12 px-4 py-3 text-purple-800 tracking-wider block bg-purple-400 font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-purple-300"
                role="button"
                >
                <div class="inline-flex space-x-2 space-x-reverse">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart4" viewBox="0 0 16 16">
                        <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l.5 2H5V5H3.14zM6 5v2h2V5H6zm3 0v2h2V5H9zm3 0v2h1.36l.5-2H12zm1.11 3H12v2h.61l.5-2zM11 8H9v2h2V8zM8 8H6v2h2V8zM5 8H3.89l.5 2H5V8zm0 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
                    </svg>
                    <span class="font-bold  hidden md:block" :class="{'text-purple-200':openMenu,'text-purple-600':!openMenu}">فروشگاه</span>
                </div>
                    <span class="" aria-hidden="true">
                        <svg class="w-4 h-4 transition-transform transform" :class="{ 'rotate-180': openMenu }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </span>
                </a>
                <div x-show="openMenu" style="display: none">
                    <a href="" class="h-12 px-4 py-3 text-purple-800 tracking-wider block bg-purple-500 font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-purple-300">سفارشات</a>
                    <a href="" class="h-12 px-4 py-3 text-purple-800 tracking-wider block bg-purple-500 font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-purple-300">تراکنش‌های مالی</a>
                    <a href="" class="h-12 px-4 py-3 text-purple-800 tracking-wider block bg-purple-500 font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-purple-300">فاکتورها</a>
                </div>
            </div>


            <div class="" x-data="{openMenu:false}">
                <a href="#" @click="$event.preventDefault(); openMenu = !openMenu"
                class="flex justify-between h-12 px-4 py-3 text-purple-800 tracking-wider block bg-purple-400 font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-purple-300"
                role="button"
                >
                <div class="inline-flex space-x-2 space-x-reverse">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-square-text" viewBox="0 0 16 16">
                        <path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                        <path d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6zm0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
                    </svg>
                    <span class="font-bold  hidden md:block" :class="{'text-purple-200':openMenu,'text-purple-600':!openMenu}">پیام و دیدگاه‌ها</span>
                </div>
                    <span class="" aria-hidden="true">
                        <svg class="w-4 h-4 transition-transform transform" :class="{ 'rotate-180': openMenu }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </span>
                </a>
                <div x-show="openMenu" style="display: none">
                    <a href="#" class="h-12 px-4 py-3 text-purple-800 tracking-wider block bg-purple-500 font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-purple-300">دیدگاه‌ها</a>
                    <a href="#" class="h-12 px-4 py-3 text-purple-800 tracking-wider block bg-purple-500 font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-purple-300">پیام کاربران</a>
                    <a href="#" class="h-12 px-4 py-3 text-purple-800 tracking-wider block bg-purple-500 font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-purple-300">اعلان‌ها</a>
                </div>
            </div>




            <div class="" x-data="{openMenu:false}">
                <a href="#" @click="$event.preventDefault(); openMenu = !openMenu"
                class="flex justify-between h-12 px-4 py-3 text-purple-800 tracking-wider block bg-purple-400 font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-purple-300"
                role="button"
                >
                <div class="inline-flex space-x-2 space-x-reverse">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-people" viewBox="0 0 16 16">
                        <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
                    </svg>
                    <span class="font-bold  hidden md:block" :class="{'text-purple-200':openMenu,'text-purple-600':!openMenu}">سیستم امنیت</span>
                </div>
                    <span class="" aria-hidden="true">
                        <svg class="w-4 h-4 transition-transform transform" :class="{ 'rotate-180': openMenu }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </span>
                </a>
                <div x-show="openMenu" style="display: none">
                    <a href="#" class="h-12 px-4 py-3 text-purple-800 tracking-wider block bg-purple-500 font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-purple-300">کاربران</a>
                    <a href="#" class="h-12 px-4 py-3 text-purple-800 tracking-wider block bg-purple-500 font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-purple-300">مدیران سایت</a>
                    <a href="#" class="h-12 px-4 py-3 text-purple-800 tracking-wider block bg-purple-500 font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-purple-300">نقش مدیران</a>
                    <a href="#" class="h-12 px-4 py-3 text-purple-800 tracking-wider block bg-purple-500 font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-purple-300">مجوز دسترسی</a>
                </div>
            </div>
            <div class="" x-data="{openMenu:false}">
                <a href="#" @click="$event.preventDefault(); openMenu = !openMenu"
                class="flex justify-between h-12 px-4 py-3 text-purple-800 tracking-wider block bg-purple-400 font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-purple-300"
                role="button"
                >
                <div class="inline-flex space-x-2 space-x-reverse">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sliders" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3h9.05zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8h2.05zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1h9.05z"/>
                    </svg>

                    <span class="font-bold  hidden md:block" :class="{'text-purple-200':openMenu,'text-purple-600':!openMenu}">تنظیمات</span>
                </div>
                    <span class="" aria-hidden="true">
                        <svg class="w-4 h-4 transition-transform transform" :class="{ 'rotate-180': openMenu }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </span>
                </a>
                <div x-show="openMenu" style="display: none">
                    <a href="" class="h-12 px-4 py-3 text-purple-800 tracking-wider block bg-purple-500 font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-purple-300">عمومی</a>
                    <a href="" class="h-12 px-4 py-3 text-purple-800 tracking-wider block bg-purple-500 font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-purple-300"></a>
                    <a href="" class="h-12 px-4 py-3 text-purple-800 tracking-wider block bg-purple-500 font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-purple-300">نقش مدیران</a>
                    <a href="" class="h-12 px-4 py-3 text-purple-800 tracking-wider block bg-purple-500 font-medium border-b-2 border-purple-800 hover:text-purple-800 hover:bg-purple-300">مجوز دسترسی</a>
                </div>
            </div>

        </div>

    </aside>

    <div class="w-full z-10 " :class="{'mr-0':!sidebarOpen,'mr-16 sm:mr-24 md:mr-64':sidebarOpen}">

        <header class="sticky top-0 bg-purple-600 bg-white h-14 px-2 sm:px-4 md:px-6 py-4 border-b-4 border-purple-900 flex justify-between">


            <div class="hidden md:inline-flex items-center space-x-4 space-x-reverse">
                <a class="hover:text-purple-100 text-purple-300 tracking-wider" >
                    <svg @click="sidebarOpen = !sidebarOpen" :class="{ 'rotate-180': sidebarOpen }" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" class="bi bi-chevron-bar-right" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M4.146 3.646a.5.5 0 0 0 0 .708L7.793 8l-3.647 3.646a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708 0zM11.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-1 0v-13a.5.5 0 0 1 .5-.5z"/>
                    </svg>
                </a>
                <a href="" class="hover:text-purple-100 text-purple-300 tracking-wider ">گزارشات</a>
                <a href="" class="hover:text-purple-100 text-purple-300 tracking-wider ">آمار</a>
                <a href="" class="hover:text-purple-100 text-purple-300 tracking-wider ">تاریخچه</a>

            </div>

            <div class="inline-flex items-center space-x-8 space-x-reverse text-base px-4 py-2">
                <a href="" class="relative inline-block cursor-pointer">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#F0F3F5" class="bi bi-chat-square-text" viewBox="0 0 16 16">
                        <path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                        <path d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6zm0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
                    </svg>
                    <span class="absolute top-0 right-0 inline-flex items-center justify-center px-0.5  py-0.5 text-xs font-thin leading-none text-blue-100 transform translate-x-1/2 -translate-y-1/2 bg-blue-600 rounded-full">12</span>
                </a>
                <a href="" class="relative inline-block cursor-pointer">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#F0F3F5" class="bi bi-envelope" viewBox="0 0 16 16">
                        <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z"/>
                    </svg>
                    <span class="absolute top-0 right-0 inline-flex items-center justify-center px-0.5  py-0.5 text-xs font-thin leading-none text-yellow-100 transform translate-x-1/2 -translate-y-1/2 bg-yellow-600 rounded-full">12</span>
                </a>
                <a href="" class="relative inline-block cursor-pointer">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#F0F3F5" class="bi bi-bell" viewBox="0 0 16 16">
                        <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"/>
                    </svg>
                    <span class="absolute top-0 right-0 inline-flex items-center justify-center px-0.5  py-0.5 text-xs font-thin leading-none text-green-100 transform translate-x-1/2 -translate-y-1/2 bg-green-600 rounded-full">12</span>
                </a>
                <a href="" class="relative inline-flex cursor-pointer space-x-1 space-x-reverse hover:bg-purple-400 text-center bg-purple-500 px-4 py-1 rounded">
                    <span class="text-white">خـروج از حساب</span>
                </a>
            </div>


        </header>

        <div class="sticky top-14 header bg-white h-12 px-2 sm:px-4 md:px-6 py-4 border-b-2 border-gray-200 flex items-center justify-between">

            <div class="flex items-center space-x-2 text-gray-400 text-base">
                <span class="text-black tracking-wider font-thin text-sm">خانه</span>
                <span>/</span>
                    <span class="tracking-wide text-sm">
                        <span class="hover:underline cursor-pointer" style="color: #20a8d8; font-weight: 100;">مدیر</span>
                    </span>
                <span>/</span>
                <span class="text-black tracking-wider font-thin text-sm text-opacity-50">میزکار</span>
            </div>


            <div class="inline-flex items-center space-x-4 space-x-reverse">

                <a href="" class="inline-flex space-x-1 space-x-reverse items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-graph-up" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5z"/>
                    </svg>
                    <span class="hover:text-purple-400 text-black text-opacity-70 tracking-wider">میزکار</span>
                </a>

                <a href="" class="inline-flex space-x-1 space-x-reverse items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
                        <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
                        <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
                    </svg>
                    <span class="hover:text-purple-400 text-black text-opacity-70 tracking-wider">تنظیمات</span>
                </a>
            </div>
        </div>

        <main class="p-2 sm:p-4 md:p-6">
            <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi cum maiores maxime officiis quaerat, quis repellendus saepe suscipit? Ex excepturi, explicabo quasi qui quidem quo sed sequi voluptas voluptatem?</p>
            <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi cum maiores maxime officiis quaerat, quis repellendus saepe suscipit? Ex excepturi, explicabo quasi qui quidem quo sed sequi voluptas voluptatem?</p>
            <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi cum maiores maxime officiis quaerat, quis repellendus saepe suscipit? Ex excepturi, explicabo quasi qui quidem quo sed sequi voluptas voluptatem?</p>
            <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi cum maiores maxime officiis quaerat, quis repellendus saepe suscipit? Ex excepturi, explicabo quasi qui quidem quo sed sequi voluptas voluptatem?</p>
            <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi cum maiores maxime officiis quaerat, quis repellendus saepe suscipit? Ex excepturi, explicabo quasi qui quidem quo sed sequi voluptas voluptatem?</p>
            <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi cum maiores maxime officiis quaerat, quis repellendus saepe suscipit? Ex excepturi, explicabo quasi qui quidem quo sed sequi voluptas voluptatem?</p>
            <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi cum maiores maxime officiis quaerat, quis repellendus saepe suscipit? Ex excepturi, explicabo quasi qui quidem quo sed sequi voluptas voluptatem?</p>
            <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi cum maiores maxime officiis quaerat, quis repellendus saepe suscipit? Ex excepturi, explicabo quasi qui quidem quo sed sequi voluptas voluptatem?</p>
        </main>

    </div>

</div>


</div>

How to make a RTL Dashboard with Tailwind CSS?

Install tailwind css of verion 2.2.4

Use the script html tag to import the script of Tailwind CSS of the version 2.2.4

<script src="https://cdn.tailwindcss.com"></script>

All the unility class needed to make a RTL Dashboard component

  • flex
  • flex-row
  • bg-purple-700
  • w-16
  • sm:w-24
  • md:w-48
  • fixed
  • flex-col
  • top-0
  • right-0
  • w-14
  • hover:w-64
  • md:w-64
  • bg-gray-200
  • dark:bg-gray-900
  • h-full
  • text-white
  • border-l-2
  • border-purple-900
  • bg-purple-600
  • h-14
  • px-4
  • py-4
  • border-b-4
  • w-8
  • h-8
  • hidden
  • md:inline-flex
  • text-purple-300
  • text-purple-400
  • overflow-y-auto
  • h-12
  • py-3
  • text-purple-800
  • block
  • bg-purple-400
  • border-b-2
  • border-purple-800
  • hover:text-purple-800
  • hover:bg-purple-300
  • inline-flex
  • md:block
  • w-4
  • h-4
  • bg-purple-500
  • w-full
  • z-10
  • sm:mr-24
  • md:mr-64':sidebarOpen}
  • sticky
  • bg-white
  • px-2
  • sm:px-4
  • md:px-6
  • hover:text-purple-100
  • text-base
  • py-2
  • relative
  • inline-block
  • absolute
  • px-0.5
  • py-0.5
  • text-xs
  • text-blue-100
  • bg-blue-600
  • text-yellow-100
  • bg-yellow-600
  • text-green-100
  • bg-green-600
  • hover:bg-purple-400
  • text-center
  • py-1
  • top-14
  • border-gray-200
  • text-gray-400
  • text-black
  • text-sm
  • text-opacity-50
  • hover:text-purple-400
  • text-opacity-70
  • p-2
  • sm:p-4
  • md:p-6

83 steps to make a RTL Dashboard component with Tailwind CSS

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

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

  3. Control the background color of an element to purple-700 using the bg-purple-700 utilities.

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

  5. Use sm:w-24 to set an element to a fixed width(6rem) at only small screen sizes.

  6. Use md:w-48 to set an element to a fixed width(12rem) at only medium screen sizes.

  7. Use fixed to position an element relative to the browser window.

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

  9. Use the top-0 utilities to set the top position of a positioned element to 0rem.

  10. Use the right-0 utilities to set the right position of a positioned element to 0rem.

  11. Use w-14 to set an element to a fixed width(3.5rem).

  12. Use hover:w-64 to set an element to a fixed width(16rem) on hover.

  13. Use md:w-64 to set an element to a fixed width(16rem) at only medium screen sizes.

  14. Control the background color of an element to gray-200 using the bg-gray-200 utilities.

  15. Control the background color of an element to gray-900 using the dark:bg-gray-900 utilities in dark theme.

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

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

  18. Control the border color of an element to l-2 using the border-l-2 utilities.

  19. Control the border color of an element to purple-900 using the border-purple-900 utilities.

  20. Control the background color of an element to purple-600 using the bg-purple-600 utilities.

  21. Use h-14 to set an element to a fixed height(3.5rem).

  22. Control the horizontal padding of an element to 1rem using the px-4 utilities.

  23. Control the vertical padding of an element to 1rem using the py-4 utilities.

  24. Control the border color of an element to b-4 using the border-b-4 utilities.

  25. Use w-8 to set an element to a fixed width(2rem).

  26. Use h-8 to set an element to a fixed height(2rem).

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

  28. Use inline-flex to create an inline flex container that flows with text at only medium screen sizes.

  29. Control the text color of an element to purple-300 using the text-purple-300 utilities.

  30. Control the text color of an element to purple-400 using the text-purple-400 utilities.

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

  32. Use h-12 to set an element to a fixed height(3rem).

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

  34. Control the text color of an element to purple-800 using the text-purple-800 utilities.

  35. Use inline utilities to put the element on its own line and fill its parent.

  36. Control the background color of an element to purple-400 using the bg-purple-400 utilities.

  37. Control the border color of an element to b-2 using the border-b-2 utilities.

  38. Control the border color of an element to purple-800 using the border-purple-800 utilities.

  39. Control the text color of an element to purple-800 on hover using the hover:text-purple-800 utilities.

  40. Control the background color of an element to purple-300 using the hover:bg-purple-300 utilities on hover.

  41. Use inline-flex to create an inline flex container that flows with text.

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

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

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

  45. Control the background color of an element to purple-500 using the bg-purple-500 utilities.

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

  47. Control the stack order (or three-dimensional positioning) of an element to 10 in Tailwind, regardless of order it has been displayed, using the z-10 utilities.

  48. Control the margin on right side of an element to 6rem at only small screen sizes using the sm:mr-24 utilities.

  49. Control the margin on right side of an element to 64' at only medium screen sizes using the md:mr-64':sidebarOpen} utilities.

  50. Use sticky to position an element as relative until it crosses a specified threshold, then treat it as fixed until its parent is off screen.

  51. Control the background color of an element to white using the bg-white utilities.

  52. Control the horizontal padding of an element to 0.5rem using the px-2 utilities.

  53. Control the horizontal padding of an element to 1rem at only small screen sizes using the sm:px-4 utilities.

  54. Control the horizontal padding of an element to 1.5rem at only medium screen sizes using the md:px-6 utilities.

  55. Control the text color of an element to purple-100 on hover using the hover:text-purple-100 utilities.

  56. Control the text color of an element to base using the text-base utilities.

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

  58. Use relative to position an element according to the normal flow of the document.

  59. Use inline-block utilities to wrap the element to prevent the text inside from extending beyond its parent.

  60. Use absolute to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.

  61. Control the horizontal padding of an element to 0.5 using the px-0.5 utilities.

  62. Control the vertical padding of an element to 0.5 using the py-0.5 utilities.

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

  64. Control the text color of an element to blue-100 using the text-blue-100 utilities.

  65. Control the background color of an element to blue-600 using the bg-blue-600 utilities.

  66. Control the text color of an element to yellow-100 using the text-yellow-100 utilities.

  67. Control the background color of an element to yellow-600 using the bg-yellow-600 utilities.

  68. Control the text color of an element to green-100 using the text-green-100 utilities.

  69. Control the background color of an element to green-600 using the bg-green-600 utilities.

  70. Control the background color of an element to purple-400 using the hover:bg-purple-400 utilities on hover.

  71. Control the text color of an element to center using the text-center utilities.

  72. Control the vertical padding of an element to 0.25rem using the py-1 utilities.

  73. Use the top-14 utilities to set the top position of a positioned element to 3.5rem.

  74. Control the border color of an element to gray-200 using the border-gray-200 utilities.

  75. Control the text color of an element to gray-400 using the text-gray-400 utilities.

  76. Control the text color of an element to black using the text-black utilities.

  77. Control the text color of an element to sm using the text-sm utilities.

  78. Control the text color of an element to opacity-50 using the text-opacity-50 utilities.

  79. Control the text color of an element to purple-400 on hover using the hover:text-purple-400 utilities.

  80. Control the text color of an element to opacity-70 using the text-opacity-70 utilities.

  81. Control the padding on all sides of an element to 0.5rem using the p-2 utilities.

  82. Control the padding on all sides of an element to 1rem at only small screen sizes using the sm:p-4 utilities.

  83. Control the padding on all sides of an element to 1.5rem at only medium screen sizes using the md:p-6 utilities.

Conclusion

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