داشبورد مدیریتی

آکاردئون

داشبورد

کامپوننت ها

آکاردئون

آکاردئون پیش‌فرض

Tailwind CSS یک راه ساده برای ساخت وب‌سایت‌های مدرن بدون ترک HTML شما فراهم می‌کند. این فریم‌ورک با اسکن همه فایل‌های HTML، اجزای JavaScript و الگوها برای نام کلاس‌ها، سبک‌های مربوطه را به طور خودکار تولید کرده و آن‌ها را به یک فایل CSS ثابت می‌نویسد. این رویکرد سریع، انعطاف‌پذیر و قابل‌اعتماد است و به هیچ زمان اجرایی نیاز ندارد. خواه نیاز به ایجاد چیدمان فرم‌ها، جداول یا پنجره‌های مودال داشته باشید، Tailwind CSS هر آنچه برای طراحی برنامه‌های وب زیبا و پاسخگو لازم است را فراهم می‌کند. علاوه بر این، این فریم‌ورک شامل فرم‌های پرداخت، سبدهای خرید و نماهای محصول است که آن را به انتخاب ایده‌آل برای توسعه رابط کاربری بعدی تجارت الکترونیکی شما تبدیل می‌کند.

                                    
                                        <div data-fc-type="accordion">
                                            <!-- آکاردئون آیتم اول -->
                                            <button data-fc-type="collapse" class="fc-collapse-open:text-primary py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400">
                                                آکاردئون #1
                                                <i class="mgc_add_line block fc-collapse-open:hidden"></i>
                                                <i class="mgc_minimize_line hidden fc-collapse-open:block"></i>
                                            </button>
                                            <div class="w-full overflow-hidden transition-[height] duration-300">
                                                <p class="text-gray-800 dark:text-gray-200">
                                                    Tailwind CSS یک راه ساده برای ساخت وب‌سایت‌های مدرن بدون ترک HTML شما فراهم می‌کند. این فریم‌ورک با اسکن همه فایل‌های HTML، اجزای JavaScript و الگوها برای نام کلاس‌ها، سبک‌های مربوطه را به طور خودکار تولید کرده و آن‌ها را به یک فایل CSS ثابت می‌نویسد. این رویکرد سریع، انعطاف‌پذیر و قابل‌اعتماد است و به هیچ زمان اجرایی نیاز ندارد. خواه نیاز به ایجاد چیدمان فرم‌ها، جداول یا پنجره‌های مودال داشته باشید، Tailwind CSS هر آنچه برای طراحی برنامه‌های وب زیبا و پاسخگو لازم است را فراهم می‌کند. علاوه بر این، این فریم‌ورک شامل فرم‌های پرداخت، سبدهای خرید و نماهای محصول است که آن را به انتخاب ایده‌آل برای توسعه رابط کاربری بعدی تجارت الکترونیکی شما تبدیل می‌کند.
                                                </p>
                                            </div>
                                            <!-- آکاردئون آیتم دوم -->
                                            <button data-fc-type="collapse" class="fc-collapse-open:text-primary py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400">
                                                آکاردئون #2
                                                <i class="mgc_add_line block fc-collapse-open:hidden"></i>
                                                <i class="mgc_minimize_line hidden fc-collapse-open:block"></i>
                                            </button>
                                            <div class="hidden w-full overflow-hidden transition-[height] duration-300">
                                                <p class="text-gray-800 dark:text-gray-200">
                                                    Tailwind CSS یک راه ساده برای ساخت وب‌سایت‌های مدرن بدون ترک HTML شما فراهم می‌کند. این فریم‌ورک با اسکن همه فایل‌های HTML، اجزای JavaScript و الگوها برای نام کلاس‌ها، سبک‌های مربوطه را به طور خودکار تولید کرده و آن‌ها را به یک فایل CSS ثابت می‌نویسد. این رویکرد سریع، انعطاف‌پذیر و قابل‌اعتماد است و به هیچ زمان اجرایی نیاز ندارد. خواه نیاز به ایجاد چیدمان فرم‌ها، جداول یا پنجره‌های مودال داشته باشید، Tailwind CSS هر آنچه برای طراحی برنامه‌های وب زیبا و پاسخگو لازم است را فراهم می‌کند. علاوه بر این، این فریم‌ورک شامل فرم‌های پرداخت، سبدهای خرید و نماهای محصول است که آن را به انتخاب ایده‌آل برای توسعه رابط کاربری بعدی تجارت الکترونیکی شما تبدیل می‌کند.
                                                </p>
                                            </div>
                                            <!-- آکاردئون آیتم سوم -->
                                            <button data-fc-type="collapse" class="fc-collapse-open:text-primary py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400">
                                                آکاردئون #3
                                                <i class="mgc_add_line block fc-collapse-open:hidden"></i>
                                                <i class="mgc_minimize_line hidden fc-collapse-open:block"></i>
                                            </button>
                                            <div class="hidden w-full overflow-hidden transition-[height] duration-300">
                                                <p class="text-gray-800 dark:text-gray-200">
                                                    Tailwind CSS یک راه ساده برای ساخت وب‌سایت‌های مدرن بدون ترک HTML شما فراهم می‌کند. این فریم‌ورک با اسکن همه فایل‌های HTML، اجزای JavaScript و الگوها برای نام کلاس‌ها، سبک‌های مربوطه را به طور خودکار تولید کرده و آن‌ها را به یک فایل CSS ثابت می‌نویسد. این رویکرد سریع، انعطاف‌پذیر و قابل‌اعتماد است و به هیچ زمان اجرایی نیاز ندارد. خواه نیاز به ایجاد چیدمان فرم‌ها، جداول یا پنجره‌های مودال داشته باشید، Tailwind CSS هر آنچه برای طراحی برنامه‌های وب زیبا و پاسخگو لازم است را فراهم می‌کند. علاوه بر این، این فریم‌ورک شامل فرم‌های پرداخت، سبدهای خرید و نماهای محصول است که آن را به انتخاب ایده‌آل برای توسعه رابط کاربری بعدی تجارت الکترونیکی شما تبدیل می‌کند.
                                                </p>
                                            </div>
                                        </div>

همیشه باز

                                    
                                        <!-- Accordion item one -->
                                        <button data-fc-type="collapse" class="fc-collapse-open:text-primary py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400">
                                            Accordion #1
                                            <i class="mgc_add_line block fc-collapse-open:hidden"></i>
                                            <i class="mgc_minimize_line hidden fc-collapse-open:block"></i>
                                        </button>
                                        <div class="w-full overflow-hidden transition-[height] duration-300">
                                            <p class="text-gray-800 dark:text-gray-200">
                                                Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript کامپوننت ها, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end.
                                            </p>
                                        </div>
        
                                        <!-- Accordion item two -->
                                        <button data-fc-type="collapse" class="fc-collapse-open:text-primary py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400">
                                            Accordion #2
                                            <i class="mgc_add_line block fc-collapse-open:hidden"></i>
                                            <i class="mgc_minimize_line hidden fc-collapse-open:block"></i>
                                        </button>
                                        <div class="hidden w-full overflow-hidden transition-[height] duration-300">
                                            <p class="text-gray-800 dark:text-gray-200">
                                                Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript کامپوننت ها, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end.
                                            </p>
                                        </div>
        
                                        <!-- Accordion item three -->
                                        <button data-fc-type="collapse" class="fc-collapse-open:text-primary py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400">
                                            Accordion #3
                                            <i class="mgc_add_line block fc-collapse-open:hidden"></i>
                                            <i class="mgc_minimize_line hidden fc-collapse-open:block"></i>
                                        </button>
                                        <div class="hidden w-full overflow-hidden transition-[height] duration-300">
                                            <p class="text-gray-800 dark:text-gray-200">
                                                Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript کامپوننت ها, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end.
                                            </p>
                                        </div>

با حاشیه

Tailwind CSS راهی بی‌دردسر برای ساخت وب‌سایت‌های مدرن بدون ترک کردن HTML شما ارائه می‌دهد. این فریم‌ورک با اسکن تمامی فایل‌های HTML، کامپوننت‌های جاوااسکریپت، و قالب‌های شما برای نام کلاس‌ها، سبک‌های مربوطه را به صورت خودکار تولید می‌کند و آن‌ها را به یک فایل CSS استاتیک می‌نویسد. این روش سریع، انعطاف‌پذیر و قابل اعتماد است و نیازی به زمان اجرا ندارد. چه نیاز به ایجاد طرح‌های فرم، جداول یا دیالوگ‌های مودال داشته باشید، Tailwind CSS هر آنچه برای طراحی برنامه‌های وب زیبا و واکنش‌گرا نیاز دارید را فراهم می‌کند. علاوه بر این، این فریم‌ورک شامل فرم‌های پرداخت، سبد خرید و نمایش محصولات است که آن را به انتخاب ایده‌آل برای توسعه فرانت‌اند تجارت الکترونیکی بعدی شما تبدیل می‌کند.

                                    
                                        <div data-fc-type="accordion" class="rounded border divide-y border-gray-200 dark:border-gray-700 divide-slate-900/10 dark:divide-white/10">
                                            <!-- Accordion item one -->
                                            <button data-fc-type="collapse" class="fc-collapse-open:text-primary p-3 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400">
                                                Accordion #1
                                                <i class="mgc_up_line fc-collapse-open:rotate-180 ms-auto transition-all text-xl"></i>
                                            </button>
                                            <div class="w-full overflow-hidden transition-[height] duration-300">
                                                <p class="p-3 text-gray-800 dark:text-gray-200">
                                                    Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript کامپوننت ها, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end.
                                                </p>
                                            </div>

                                            <!-- Accordion item two -->
                                            <button data-fc-type="collapse" class="fc-collapse-open:text-primary p-3 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400">
                                                Accordion #2
                                                <i class="mgc_up_line fc-collapse-open:rotate-180 ms-auto transition-all text-xl"></i>
                                            </button>
                                            <div class="hidden w-full overflow-hidden transition-[height] duration-300">
                                                <p class="p-3 text-gray-800 dark:text-gray-200">
                                                    Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript کامپوننت ها, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end.
                                                </p>
                                            </div>

                                            <!-- Accordion item three -->
                                            <button data-fc-type="collapse" class="fc-collapse-open:text-primary p-3 inline-flex items-center justify-between gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400">
                                                Accordion #3
                                                <i class="mgc_up_line fc-collapse-open:rotate-180 ms-auto transition-all text-xl"></i>
                                            </button>
                                            <div class="hidden w-full overflow-hidden transition-[height] duration-300">
                                                <p class="p-3 text-gray-800 dark:text-gray-200">
                                                    Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript کامپوننت ها, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end.
                                                </p>
                                            </div>
                                        </div>

با آیکون

                                    
                                        <div data-fc-type="accordion" class="space-y-3">
                                            <!-- Accordion item one -->
                                            <div class="rounded border border-gray-200 dark:border-gray-700">
                                                <button data-fc-type="collapse" class="fc-collapse-open:text-primary p-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400">
                                                    <i class="mgc_store_2_line text-lg"></i>
                                                    Accordion #1
                                                    <i class="mgc_up_line fc-collapse-open:rotate-180 ms-auto transition-all text-xl"></i>
                                                </button>
                                                <div class="w-full overflow-hidden transition-[height] duration-300">
                                                    <div class="border-t p-3 border-gray-200 dark:border-gray-700">
                                                        <p class="text-gray-800 dark:text-gray-200">
                                                            Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript کامپوننت ها, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end.
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
            
                                            <!-- Accordion item two -->
                                            <div class="rounded border border-gray-200 dark:border-gray-700">
                                                <button data-fc-type="collapse" class="fc-collapse-open:text-primary p-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400">
                                                    <i class="mgc_safe_flash_line text-lg"></i>
                                                    Accordion #2
                                                    <i class="mgc_up_line fc-collapse-open:rotate-180 ms-auto transition-all text-xl"></i>
                                                </button>
                                                <div class="hidden w-full overflow-hidden transition-[height] duration-300">
                                                    <div class="border-t p-3 border-gray-200 dark:border-gray-700">
                                                        <p class="text-gray-800 dark:text-gray-200">
                                                            Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript کامپوننت ها, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end.
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
            
                                            <!-- Accordion item three -->
                                            <div class="rounded border border-gray-200 dark:border-gray-700">
                                                <button data-fc-type="collapse" class="fc-collapse-open:text-primary p-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400">
                                                    <i class="mgc_home_3_line text-lg"></i>
                                                    Accordion #3
                                                    <i class="mgc_up_line fc-collapse-open:rotate-180 ms-auto transition-all text-xl"></i>
                                                </button>
                                                <div class="hidden w-full overflow-hidden transition-[height] duration-300">
                                                    <div class="border-t p-3 border-gray-200 dark:border-gray-700">
                                                        <p class="text-gray-800 dark:text-gray-200">
                                                            Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript کامپوننت ها, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end.
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

با فلش

                                    
                                        <div data-fc-type="accordion" class="divide-y divide-slate-900/10 dark:divide-white/10">
                                            <!-- Accordion item one -->
                                            <button data-fc-type="collapse" class="fc-collapse-open:text-primary py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400">
                                                Accordion #1
                                                <i class="mgc_up_line fc-collapse-open:rotate-180 ms-auto transition-all text-xl"></i>
                                            </button>
                                            <div class="w-full overflow-hidden transition-[height] duration-300">
                                                <p class="py-3 text-gray-800 dark:text-gray-200">
                                                    Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript کامپوننت ها, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end.
                                                </p>
                                            </div>

                                            <!-- Accordion item two -->
                                            <button data-fc-type="collapse" class="fc-collapse-open:text-primary py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400">
                                                Accordion #2
                                                <i class="mgc_up_line fc-collapse-open:rotate-180 ms-auto transition-all text-xl"></i>
                                            </button>
                                            <div class="hidden w-full overflow-hidden transition-[height] duration-300">
                                                <p class="py-3 text-gray-800 dark:text-gray-200">
                                                    Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript کامپوننت ها, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end.
                                                </p>
                                            </div>

                                            <!-- Accordion item three -->
                                            <button data-fc-type="collapse" class="fc-collapse-open:text-primary py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400">
                                                Accordion #3
                                                <i class="mgc_up_line fc-collapse-open:rotate-180 ms-auto transition-all text-xl"></i>
                                            </button>
                                            <div class="hidden w-full overflow-hidden transition-[height] duration-300">
                                                <p class="py-3 text-gray-800 dark:text-gray-200">
                                                    Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript کامپوننت ها, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end.
                                                </p>
                                            </div>
                                        </div>

بدون فلش

                                    
                                        <div data-fc-type="accordion">
                                            <!-- Accordion item one -->
                                            <button data-fc-type="collapse" class="fc-collapse-open:text-primary py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400">
                                                Accordion #1
                                            </button>
                                            <div class="w-full overflow-hidden transition-[height] duration-300">
                                                <p class="text-gray-800 dark:text-gray-200">
                                                    Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript کامپوننت ها, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end.
                                                </p>
                                            </div>
            
                                            <!-- Accordion item two -->
                                            <button data-fc-type="collapse" class="fc-collapse-open:text-primary py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400">
                                                Accordion #2
                                            </button>
                                            <div class="hidden w-full overflow-hidden transition-[height] duration-300">
                                                <p class="text-gray-800 dark:text-gray-200">
                                                    Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript کامپوننت ها, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end.
                                                </p>
                                            </div>
            
                                            <!-- Accordion item three -->
                                            <button data-fc-type="collapse" class="fc-collapse-open:text-primary py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400">
                                                Accordion #3
                                            </button>
                                            <div class="hidden w-full overflow-hidden transition-[height] duration-300">
                                                <p class="text-gray-800 dark:text-gray-200">
                                                    Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript کامپوننت ها, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end.
                                                </p>
                                            </div>
                                        </div>

تو در تو

Tailwind CSS یک روش یکپارچه برای ساخت وب‌سایت‌های مدرن بدون نیاز به ترک HTML شما ارائه می‌دهد. این فریم‌ورک با اسکن تمام فایل‌های HTML، اجزای جاوا اسکریپت و قالب‌ها برای نام‌های کلاس، به طور خودکار استایل‌های مربوطه را تولید کرده و آن‌ها را به یک فایل CSS ثابت می‌نویسد. این روش سریع، انعطاف‌پذیر و قابل اعتماد است و به زمان اجرا نیازی ندارد. چه نیاز به ایجاد طرح‌های فرم، جداول یا دیالوگ‌های مدال داشته باشید، Tailwind CSS همه چیز لازم برای طراحی برنامه‌های وب زیبا و پاسخگو را فراهم می‌کند. علاوه بر این، این فریم‌ورک شامل فرم‌های پرداخت، سبد خرید و نمایش محصولات است که آن را به گزینه‌ای ایده‌آل برای توسعه رابط کاربری بعدی تجارت الکترونیک شما تبدیل می‌کند.

                                    
                                        <div data-fc-type="accordion" id="parent-accordion">
                                            <!-- Accordion item one -->
                                            <button data-fc-type="collapse" data-fc-parent="parent-accordion" class="fc-collapse-open:text-primary py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400">
                                                <i class="mgc_add_line block fc-collapse-open:hidden"></i>
                                                <i class="mgc_minimize_line hidden fc-collapse-open:block"></i>
                                                Accordion #1
                                            </button>
                                            <div class="w-full overflow-hidden transition-[height] duration-300">
                                                <div data-fc-type="accordion" class="ps-6" id="child-accordion">
                                                    <!-- Accordion sub item one -->
                                                    <button data-fc-type="collapse" data-fc-parent="child-accordion" class="fc-collapse-open:text-primary py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400">
                                                        <i class="mgc_add_line block fc-collapse-open:hidden"></i>
                                                        <i class="mgc_minimize_line hidden fc-collapse-open:block"></i>
                                                        Sub accordion #1
                                                    </button>
                                                    <div class="w-full overflow-hidden transition-[height] duration-300">
                                                        <p class="text-gray-800 dark:text-gray-200">
                                                            Tailwind CSS offers a seamless way to build modern websites without having to leave your HTML. The framework functions by scanning all of your HTML files, JavaScript کامپوننت ها, and templates for class names, automatically generating corresponding styles, and writing them to a static CSS file. This approach is fast, flexible, and reliable, requiring zero runtime. Whether you need to create form layouts, tables, or modal dialogs, Tailwind CSS provides everything necessary to design beautiful, responsive web applications. Additionally, the framework includes checkout forms, shopping carts, and product views, making it the ideal choice for developing your next e-commerce front-end.
                                                        </p>
                                                    </div>
            
                                                    <!-- Accordion sub item two -->
                                                    <button data-fc-type="collapse" data-fc-parent="child-accordion" class="fc-collapse-open:text-primary py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400">
                                                        <i class="mgc_add_line block fc-collapse-open:hidden"></i>
                                                        <i class="mgc_minimize_line hidden fc-collapse-open:block"></i>
                                                        Sub accordion #2
                                                    </button>
                                                    <div class="hidden w-full overflow-hidden transition-[height] duration-300">
                                                        <p class="text-gray-800 dark:text-gray-200">
                                                            <em>This is the second item's accordion body.</em> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
                                                        </p>
                                                    </div>
            
                                                    <!-- Accordion sub item three -->
                                                    <button data-fc-type="collapse" data-fc-parent="child-accordion" class="fc-collapse-open:text-primary py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400">
                                                        <i class="mgc_add_line block fc-collapse-open:hidden"></i>
                                                        <i class="mgc_minimize_line hidden fc-collapse-open:block"></i>
                                                        Sub accordion #3
                                                    </button>
                                                    <div class="hidden w-full overflow-hidden transition-[height] duration-300">
                                                        <p class="text-gray-800 dark:text-gray-200">
                                                            <em>This is the first item's accordion body.</em> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
            
                                            <!-- Accordion item two -->
                                            <button data-fc-type="collapse" data-fc-parent="parent-accordion" class="fc-collapse-open:text-primary py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400">
                                                <i class="mgc_add_line block fc-collapse-open:hidden"></i>
                                                <i class="mgc_minimize_line hidden fc-collapse-open:block"></i>
                                                Accordion #2
                                            </button>
                                            <div class="hidden w-full overflow-hidden transition-[height] duration-300">
                                                <p class="text-gray-800 dark:text-gray-200">
                                                    <em>This is the second item's accordion body.</em> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
                                                </p>
                                            </div>
            
                                            <!-- Accordion item three -->
                                            <button data-fc-type="collapse" data-fc-parent="parent-accordion" class="fc-collapse-open:text-primary py-3 inline-flex items-center gap-x-3 w-full font-semibold text-left text-gray-800 transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400" e">
                                                <i class="mgc_add_line block fc-collapse-open:hidden"></i>
                                                <i class="mgc_minimize_line hidden fc-collapse-open:block"></i>
                                                Accordion #3
                                            </button>
                                            <div class="hidden w-full overflow-hidden transition-[height] duration-300">
                                                <p class="text-gray-800 dark:text-gray-200">
                                                    <em>This is the first item's accordion body.</em> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
                                                </p>
                                            </div>
                                        </div>

دسترسی نامحدود

آکاردئون

آکاردئون پیش‌فرض

همیشه باز

با حاشیه

با آیکون

با فلش

بدون فلش

تو در تو

تنظیمات قالب

قالب

فونت ها

جهت

عرض محتوا

نمای جانبی

رنگ منو

رنگ نوار بالا

رنگ اصلی

موقعیت طرح