تب ها
پایه
Tailwind یک فریمورک CSS مبتنی بر یوتیلیتی است که مجموعه گستردهای از کلاسها را ارائه میدهد، شامل flex، pt-4، text-center و rotate-90. این کلاسها را میتوان برای ساخت هر طراحی به طور مستقیم در نشانهگذاری ترکیب کرد، و به شما اجازه میدهد تا ایده بعدی خود را حتی سریعتر بسازید. همراه با کارآیی خود، Tailwind همچنین کامپوننتها و الگوهای زیبا و کارشناسی شدهای را ارائه میدهد که نقطه شروعی عالی برای پروژه بعدی شما است. با بیش از 200+ مثال کامپوننت حرفهای، کاملاً واکنشگرا و کارشناسی شده در اختیار شما، میتوانید آنها را به راحتی در پروژههای Tailwind خود ادغام کنید و طبق ترجیحات خود سفارشی کنید.
Tailwind Elements فرآیند افزودن حالت تاریک به پروژه شما را ساده میکند. با استفاده از کلاسهای Tailwind و واریانت تاریک، میتوانید به راحتی یک وبسایت با دو تم را ادغام کنید. کامپوننتهای ما به طور پیشفرض با واریانت تم تاریک ارائه میشوند. علاوه بر این، مانند هر پروژه Tailwind، تم پیشفرض میتواند با تغییر پالت رنگ پروژه، مقیاس تایپ، فونتها، نقاط شکست، مقادیر شعاع مرزی و سایر ویژگیها از طریق فایل پیکربندی tailwind.config.js شخصیسازی شود.
Tailwind CSS روشی بینقص برای ساخت وبسایتهای مدرن بدون نیاز به ترک HTML شما فراهم میکند. این فریمورک با اسکن تمام فایلهای HTML شما، کامپوننتهای جاوااسکریپت و قالبها برای نامهای کلاس، بهطور خودکار استایلهای مربوطه را ایجاد کرده و آنها را به یک فایل استاتیک CSS مینویسد. این رویکرد سریع، انعطافپذیر و قابل اعتماد است و به زمان اجرای صفر نیاز دارد. چه نیاز به ایجاد طرحهای فرم، جداول یا دیالوگهای مودال داشته باشید، Tailwind CSS همه چیز لازم برای طراحی برنامههای وب زیبا و واکنشگرا را فراهم میکند. علاوه بر این، این فریمورک شامل فرمهای پرداخت، سبدهای خرید و نماهای محصول است که آن را انتخاب ایدهآلی برای توسعه فرانتاند تجارت الکترونیک بعدی شما میکند.
<div data-fc-type="tab">
<nav class="flex space-x-3 border-b" aria-label="Tabs">
<button data-fc-target="#tabs-with-underline-1" type="button" class="fc-tab-active:font-semibold fc-tab-active:border-primary fc-tab-active:text-primary py-4 px-1 inline-flex items-center gap-2 border-b-2 border-transparent -mb-px transition-all text-sm whitespace-nowrap text-gray-500 hover:text-primary active">
Tab One
</button>
<button data-fc-target="#tabs-with-underline-2" type="button" class="fc-tab-active:font-semibold fc-tab-active:border-primary fc-tab-active:text-primary py-4 px-1 inline-flex items-center gap-2 border-b-2 border-transparent -mb-px transition-all text-sm whitespace-nowrap text-gray-500 hover:text-primary">
Tab Two
</button>
<button data-fc-target="#tabs-with-underline-3" type="button" class="fc-tab-active:font-semibold fc-tab-active:border-primary fc-tab-active:text-primary py-4 px-1 inline-flex items-center gap-2 border-b-2 border-transparent -mb-px transition-all text-sm whitespace-nowrap text-gray-500 hover:text-primary">
Tab Three
</button>
</nav>
<div class="mt-3 overflow-hidden">
<div id="tabs-with-underline-1" class="active fc-tab-active:opacity-100 opacity-0 transition-all duration-300 transform" role="tabpanel" aria-labelledby="tabs-with-underline-item-1">
<p class="text-gray-500 dark:text-gray-400">
Tailwind is a utility-first CSS framework that offers an extensive range of
classes, including flex, pt-4, text-center, and rotate-90. These classes can be
combined to construct any design directly in your markup, allowing you to build
your next idea even faster. Along with its efficiency, Tailwind also provides
beautifully designed, expertly crafted کامپوننت ها and templates, making it the
perfect starting point for your next project. With over 200+ professionally
designed, fully responsive, expertly crafted component examples at your
disposal, you can seamlessly integrate them into your Tailwind projects and
customize them according to your preferences.
</p>
</div>
<div id="tabs-with-underline-2" class="hidden fc-tab-active:opacity-100 transition-all duration-300 transform opacity-0" role="tabpanel" aria-labelledby="tabs-with-underline-item-2">
<p class="text-gray-500 dark:text-gray-400">
Tailwind Elements simplifies the process of adding a dark mode to your project.
By utilizing Tailwind's classes and a dark variant, you can effortlessly
integrate a dual-themed website. Our کامپوننت ها come equipped with the dark
theme variant as a default feature. Furthermore, like any Tailwind project, the
default theme can be personalized by modifying the project's color palette, type
scale, fonts, breakpoints, border radius values, and other attributes through
the tailwind.config.js configuration file.
</p>
</div>
<div id="tabs-with-underline-3" class="hidden fc-tab-active:opacity-100 transition-all duration-300 transform opacity-0" role="tabpanel" aria-labelledby="tabs-with-underline-item-3">
<p class="text-gray-500 dark:text-gray-400">
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>
تبها عمودی چپ
Tailwind یک فریمورک CSS بر پایهی ابزارهای کمکی است که دامنهی وسیعی از کلاسها را ارائه میدهد، از جمله flex، pt-4، text-center، و rotate-90. این کلاسها را میتوان ترکیب کرد تا هر طرحی را مستقیماً در نشانهگذاری خود ساخت، که به شما اجازه میدهد ایدهی بعدی خود را سریعتر بسازید. همراه با کارایی آن، Tailwind همچنین کامپوننتها و قالبهای زیبا و با دقت طراحی شدهای را فراهم میکند، که آن را به نقطه شروعی عالی برای پروژه بعدی شما تبدیل میکند. با بیش از ۲۰۰+ نمونه کامپوننتهای طراحی شده به صورت حرفهای، کاملاً واکنشگرا و با دقت ساخته شده در اختیار شما، میتوانید آنها را بهراحتی در پروژههای Tailwind خود ادغام کنید و آنها را بر اساس ترجیحات خود سفارشی کنید.
عناصر Tailwind فرایند اضافه کردن حالت تاریک به پروژه شما را ساده میکنند. با استفاده از کلاسهای Tailwind و یک واریانت تاریک، میتوانید یک وبسایت دو-تمی را بهراحتی یکپارچه کنید. کامپوننتهای ما به طور پیشفرض با واریانت تم تاریک مجهز شدهاند. علاوه بر این، مانند هر پروژهی Tailwind، تم پیشفرض میتواند با تغییر پالت رنگی پروژه، مقیاس تایپوگرافی، فونتها، نقاط قطع، مقادیر شعاع حاشیه و دیگر ویژگیها از طریق فایل تنظیمات tailwind.config.js شخصیسازی شود.
Tailwind CSS یک راه بدون درز برای ساخت وبسایتهای مدرن بدون نیاز به ترک HTML شما ارائه میدهد. این فریمورک با اسکن تمامی فایلهای HTML، کامپوننتهای JavaScript و قالبهای شما برای نام کلاسها، بهطور خودکار استایلهای مربوطه را تولید کرده و آنها را به یک فایل CSS استاتیک مینویسد. این روش سریع، انعطافپذیر و قابل اطمینان است و به زمان اجرا نیاز ندارد. چه بخواهید چیدمان فرمها، جداول یا دیالوگهای مدال را ایجاد کنید، Tailwind CSS همه چیز لازم برای طراحی برنامههای وب زیبا و واکنشگرا را فراهم میکند. علاوه بر این، فریمورک شامل فرمهای تسویه حساب، سبدهای خرید و نمایش محصولات است، که آن را به انتخابی ایدهآل برای توسعهی فرانتاند تجارت الکترونیک بعدی شما تبدیل میکند.
<nav class="flex md:flex-col gap-2 space-y-2" aria-label="Tabs" role="tablist">
<button data-fc-target="#vertical-tab-with-border-1" type="button" class="fc-tab-active:bg-primary fc-tab-active:text-white btn bg-transparent active" id="vertical-tab-with-border-item-1" aria-controls="vertical-tab-with-border-1" role="tab">
Tab 1
</button>
<button data-fc-target="#vertical-tab-with-border-2" type="button" class="fc-tab-active:bg-primary fc-tab-active:text-white btn bg-transparent" id="vertical-tab-with-border-item-2" aria-controls="vertical-tab-with-border-2" role="tab">
Tab 2
</button>
<button data-fc-target="#vertical-tab-with-border-3" type="button" class="fc-tab-active:bg-primary fc-tab-active:text-white btn bg-transparent" id="vertical-tab-with-border-item-3" aria-controls="vertical-tab-with-border-3" role="tab">
Tab 3
</button>
</nav>
<div class="md:col-span-4">
<div id="vertical-tab-with-border-1" role="tabpanel" aria-labelledby="vertical-tab-with-border-item-1">
<p class="text-gray-500 dark:text-gray-400">
Tailwind is a utility-first CSS framework that offers an extensive range of
classes, including flex, pt-4, text-center, and rotate-90. These classes can be
combined to construct any design directly in your markup, allowing you to build
your next idea even faster. Along with its efficiency, Tailwind also provides
beautifully designed, expertly crafted کامپوننت ها and templates, making it the
perfect starting point for your next project. With over 200+ professionally
designed, fully responsive, expertly crafted component examples at your
disposal, you can seamlessly integrate them into your Tailwind projects and
customize them according to your preferences.
</p>
</div>
<div id="vertical-tab-with-border-2" class="hidden" role="tabpanel" aria-labelledby="vertical-tab-with-border-item-2">
<p class="text-gray-500 dark:text-gray-400">
Tailwind Elements simplifies the process of adding a dark mode to your project.
By utilizing Tailwind's classes and a dark variant, you can effortlessly
integrate a dual-themed website. Our کامپوننت ها come equipped with the dark
theme variant as a default feature. Furthermore, like any Tailwind project, the
default theme can be personalized by modifying the project's color palette, type
scale, fonts, breakpoints, border radius values, and other attributes through
the tailwind.config.js configuration file.
</p>
</div>
<div id="vertical-tab-with-border-3" class="hidden" role="tabpanel" aria-labelledby="vertical-tab-with-border-item-3">
<p class="text-gray-500 dark:text-gray-400">
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 اول از نوع utility است که مجموعهای گسترده از کلاسها را ارائه میدهد، از جمله flex, pt-4, text-center, و rotate-90. این کلاسها را میتوان ترکیب کرد تا هر طراحی را مستقیماً در نشانهگذاری خود ساخت، که به شما امکان میدهد ایده بعدی خود را حتی سریعتر بسازید. علاوه بر کارایی آن، Tailwind همچنین کامپوننتها و قالبهای زیبا و طراحی شده با دقت را ارائه میدهد که نقطه شروع کاملی برای پروژه بعدی شما است. با بیش از ۲۰۰+ نمونه کامپوننت حرفهای، کاملاً پاسخگو و طراحی شده با دقت در اختیار شما، میتوانید آنها را به راحتی در پروژههای Tailwind خود ادغام کنید و بر اساس ترجیحات خود سفارشیسازی کنید.
Tailwind Elements فرآیند افزودن حالت تاریک به پروژه شما را ساده میکند. با استفاده از کلاسهای Tailwind و یک واریانت تاریک، میتوانید به راحتی یک وبسایت دو موضوعه را ادغام کنید. کامپوننتهای ما با واریانت حالت تاریک به عنوان یک ویژگی پیشفرض ارائه میشوند. علاوه بر این، مانند هر پروژه Tailwind، موضوع پیشفرض را میتوان با تغییر پالت رنگ پروژه، مقیاس تایپ، فونتها، نقاط شکست، مقادیر شعاع حاشیه و سایر ویژگیها از طریق فایل تنظیمات tailwind.config.js شخصیسازی کرد.
Tailwind CSS راهی بدون دردسر برای ساخت وبسایتهای مدرن بدون نیاز به ترک HTML شما ارائه میدهد. این فریمورک با اسکن تمام فایلهای HTML، کامپوننتهای JavaScript و قالبهای شما برای نام کلاسها عمل میکند، به طور خودکار سبکهای مربوطه را تولید میکند و آنها را به یک فایل CSS ایستا مینویسد. این رویکرد سریع، انعطافپذیر و قابل اعتماد است و نیازی به اجرای زمانبندی ندارد. چه نیاز به ایجاد طرحهای فرم، جداول یا دیالوگهای مودال داشته باشید، Tailwind CSS همه چیز لازم برای طراحی برنامههای وب زیبا و پاسخگو را فراهم میکند. علاوه بر این، این فریمورک شامل فرمهای پرداخت، سبد خرید و نمایش محصولات است که آن را به انتخاب ایدهآل برای توسعه جلوی فروشگاه بعدی تجارت الکترونیک شما تبدیل میکند.
<nav class="flex space-x-2 border-b border-gray-200 dark:border-gray-700" aria-label="Tabs" role="tablist">
<button data-fc-target="#card-type-tab-1" type="button" class="fc-tab-active:bg-white fc-tab-active:border-b-transparent fc-tab-active:text-primary dark:fc-tab-active:bg-gray-800 dark:fc-tab-active:border-b-gray-800 dark:fc-tab-active:text-white -mb-px py-3 px-4 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center border text-gray-500 rounded-t-lg hover:text-gray-700 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400 active" id="card-type-tab-item-1" aria-controls="card-type-tab-1" role="tab">
Tab 1
</button>
<button data-fc-target="#card-type-tab-2" type="button" class="fc-tab-active:bg-white fc-tab-active:border-b-transparent fc-tab-active:text-primary dark:fc-tab-active:bg-gray-800 dark:fc-tab-active:border-b-gray-800 dark:fc-tab-active:text-white -mb-px py-3 px-4 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center border text-gray-500 rounded-t-lg hover:text-gray-700 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-300" id="card-type-tab-item-2" aria-controls="card-type-tab-2" role="tab">
Tab 2
</button>
<button data-fc-target="#card-type-tab-3" type="button" class="fc-tab-active:bg-white fc-tab-active:border-b-transparent fc-tab-active:text-primary dark:fc-tab-active:bg-gray-800 dark:fc-tab-active:border-b-gray-800 dark:fc-tab-active:text-white -mb-px py-3 px-4 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center border text-gray-500 rounded-t-lg hover:text-gray-700 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-300" id="card-type-tab-item-3" aria-controls="card-type-tab-3" role="tab">
Tab 3
</button>
</nav>
<div class="mt-3">
<div id="card-type-tab-1" role="tabpanel" aria-labelledby="card-type-tab-item-1">
<p class="text-gray-500 dark:text-gray-400">
Tailwind is a utility-first CSS framework that offers an extensive range of classes,
including flex, pt-4, text-center, and rotate-90. These classes can be combined to
construct any design directly in your markup, allowing you to build your next idea
even faster. Along with its efficiency, Tailwind also provides beautifully designed,
expertly crafted کامپوننت ها and templates, making it the perfect starting point for
your next project. With over 200+ professionally designed, fully responsive,
expertly crafted component examples at your disposal, you can seamlessly integrate
them into your Tailwind projects and customize them according to your preferences.
</p>
</div>
<div id="card-type-tab-2" class="hidden" role="tabpanel" aria-labelledby="card-type-tab-item-2">
<p class="text-gray-500 dark:text-gray-400">
Tailwind Elements simplifies the process of adding a dark mode to your project. By
utilizing Tailwind's classes and a dark variant, you can effortlessly integrate a
dual-themed website. Our کامپوننت ها come equipped with the dark theme variant as a
default feature. Furthermore, like any Tailwind project, the default theme can be
personalized by modifying the project's color palette, type scale, fonts,
breakpoints, border radius values, and other attributes through the
tailwind.config.js configuration file.
</p>
</div>
<div id="card-type-tab-3" class="hidden" role="tabpanel" aria-labelledby="card-type-tab-item-3">
<p class="text-gray-500 dark:text-gray-400">
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>
نوار با تب
Tailwind یک چارچوب CSS اولویتمحور است که مجموعهای گسترده از کلاسها را ارائه میدهد، از جمله flex، pt-4، text-center و rotate-90. این کلاسها میتوانند ترکیب شوند تا هر طراحی را مستقیماً در نشانگر شما بسازند و به شما این امکان را میدهند که ایده بعدی خود را حتی سریعتر پیادهسازی کنید. به همراه کارایی آن، Tailwind همچنین کامپوننتها و قالبهایی زیبا و حرفهای ارائه میدهد که آن را به نقطه شروعی ایدهآل برای پروژه بعدیتان تبدیل میکند. با بیش از 200+ نمونه کامپوننت حرفهای، کاملاً پاسخگو و بهطور حرفهای طراحی شده که در دسترس شماست، شما میتوانید آنها را به طور ساده در پروژههای Tailwind خود یکپارچه سازی کنید و آنها را بر اساس ترجیحات خود سفارشیسازی کنید.
Tailwind Elements فرآیند اضافه کردن حالت تاریک به پروژهی شما را سادهتر میکند. با استفاده از کلاسهای Tailwind و نسخه تاریک، شما میتوانید به طور آسان یک وبسایت با دو تم ادغام کنید. کامپوننتهای ما به طور پیشفرض با نسخه تاریک تجهیز شدهاند. علاوه بر این، مانند هر پروژهی Tailwind دیگر، میتوان تم پیشفرض را با تغییر پالت رنگ پروژه، مقیاس نوع، فونتها، نقاط ورود، مقادیر شعاع حاشیه و سایر ویژگیها از طریق فایل پیکربندی tailwind.config.js شخصیسازی کرد.
Tailwind CSS راهی بیدرنگ برای ساخت وبسایتهای مدرن بدون نیاز به ترک HTML خود ارائه میدهد. این چارچوب با اسکن تمام فایلهای HTML، کامپوننتهای JavaScript و قالبهای شما برای نامهای کلاس، به طور خودکار سبکهای متناظر را تولید کرده و آنها را به یک فایل CSS استاتیک مینویسد. این رویکرد سریع، انعطافپذیر و قابل اعتماد است و به صفر زمان اجرا نیاز دارد. آیا شما نیاز دارید تا چیدمانهای فرم، جداول یا پنجرههای مودال ایجاد کنید، Tailwind CSS همه چیز لازم را برای طراحی برنامههای وب زیبا و واکنشپذیر فراهم میکند. علاوه بر این، این چارچوب شامل فرمهای پرداخت، سبد خرید و نمای محصول است که آن را به انتخاب ایدهآل برای توسعه رابط کاربری جلوی فروشگاه اینترنتی خود تبدیل میکند.
<nav class="relative z-0 flex border rounded-xl overflow-hidden dark:border-gray-700" aria-label="Tabs" role="tablist">
<button data-fc-target="#bar-with-underline-1" type="button" class="fc-tab-active:border-b-primary fc-tab-active:text-gray-900 dark:fc-tab-active:text-white relative min-w-0 flex-1 bg-white first:border-l-0 border-l border-b-2 py-4 px-4 text-gray-500 hover:text-gray-700 text-sm font-medium text-center overflow-hidden hover:bg-gray-50 focus:z-10 dark:bg-gray-800 dark:border-l-gray-700 dark:border-b-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-400 active" id="bar-with-underline-item-1" aria-controls="bar-with-underline-1" role="tab">
Tab 1
</button>
<button data-fc-target="#bar-with-underline-2" type="button" class="fc-tab-active:border-b-primary fc-tab-active:text-gray-900 dark:fc-tab-active:text-white relative min-w-0 flex-1 bg-white first:border-l-0 border-l border-b-2 py-4 px-4 text-gray-500 hover:text-gray-700 text-sm font-medium text-center overflow-hidden hover:bg-gray-50 focus:z-10 dark:bg-gray-800 dark:border-l-gray-700 dark:border-b-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-400" id="bar-with-underline-item-2" aria-controls="bar-with-underline-2" role="tab">
Tab 2
</button>
<button data-fc-target="#bar-with-underline-3" type="button" class="fc-tab-active:border-b-primary fc-tab-active:text-gray-900 dark:fc-tab-active:text-white relative min-w-0 flex-1 bg-white first:border-l-0 border-l border-b-2 py-4 px-4 text-gray-500 hover:text-gray-700 text-sm font-medium text-center overflow-hidden hover:bg-gray-50 focus:z-10 dark:bg-gray-800 dark:border-l-gray-700 dark:border-b-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-400" id="bar-with-underline-item-3" aria-controls="bar-with-underline-3" role="tab">
Tab 3
</button>
</nav>
<div class="mt-3">
<div id="bar-with-underline-1" role="tabpanel" aria-labelledby="bar-with-underline-item-1">
<p class="text-gray-500 dark:text-gray-400">
Tailwind is a utility-first CSS framework that offers an extensive range of
classes,
including flex, pt-4, text-center, and rotate-90. These classes can be combined
to
construct any design directly in your markup, allowing you to build your next
idea
even faster. Along with its efficiency, Tailwind also provides beautifully
designed,
expertly crafted کامپوننت ها and templates, making it the perfect starting point
for
your next project. With over 200+ professionally designed, fully responsive,
expertly crafted component examples at your disposal, you can seamlessly
integrate
them into your Tailwind projects and customize them according to your
preferences.
</p>
</div>
<div id="bar-with-underline-2" class="hidden" role="tabpanel" aria-labelledby="bar-with-underline-item-2">
<p class="text-gray-500 dark:text-gray-400">
Tailwind Elements simplifies the process of adding a dark mode to your project.
By
utilizing Tailwind's classes and a dark variant, you can effortlessly integrate
a
dual-themed website. Our کامپوننت ها come equipped with the dark theme variant as
a
default feature. Furthermore, like any Tailwind project, the default theme can
be
personalized by modifying the project's color palette, type scale, fonts,
breakpoints, border radius values, and other attributes through the
tailwind.config.js configuration file.
</p>
</div>
<div id="bar-with-underline-3" class="hidden" role="tabpanel" aria-labelledby="bar-with-underline-item-3">
<p class="text-gray-500 dark:text-gray-400">
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 مبتنی بر ابزار است که مجموعهای گسترده از کلاسها را ارائه میدهد، شامل flex، pt-4، text-center و rotate-90. این کلاسها را میتوانید ترکیب کنید تا هر طرح را مستقیماً در نشانهگذاری خود ساخته و ایدهی بعدی خود را حتی سریعتر پیاده سازی کنید. به همراه کارایی آن، Tailwind همچنین کامپوننتها و قالبهای زیبا و با دقت طراحی شده را ارائه میدهد که آن را به نقطه شروعی ایدهآل برای پروژهی بعدی شما تبدیل میکند. با بیش از 200 مثال کامپوننت حرفهای، کاملاً واکنشپذیر و با دقت طراحی که در دسترس شما قرار دارد، میتوانید آنها را به طور یکپارچه در پروژههای Tailwind خود ادغام کرده و آنها را بر اساس ترجیحات خود سفارشیسازی کنید.
Tailwind Elements فرآیند اضافه کردن حالت تاریک به پروژهی شما را سادهتر میکند. با استفاده از کلاسهای Tailwind و نسخه تاریک، میتوانید به راحتی یک وبسایت دو تم ترکیبی را ادغام کنید. کامپوننتهای ما به طور پیشفرض با نسخه تاریک همراه هستند. علاوه بر این، همانطور که در هر پروژهی Tailwind است، میتوان تم پیشفرض را با تغییر پالت رنگهای پروژه، مقیاس نوع، فونتها، شکستنقطه، مقادیر شعاع حاشیه و سایر ویژگیها از طریق فایل پیکربندی tailwind.config.js شخصیسازی کرد.
Tailwind CSS روشی بیدرز برای ساخت وبسایتهای مدرن را بدون نیاز به ترکیب HTML ارائه میدهد. این چارچوب با اسکن کلیه فایلهای HTML شما، کامپوننتهای JavaScript و قالبها برای نامهای کلاس، به طور خودکار استایلهای متناظر را تولید کرده و آنها را در یک فایل CSS استاتیک نوشته و نگهداری میکند. این رویکرد سریع، انعطافپذیر و قابل اعتماد است و به صورت زمان اجرایی صفر نیاز دارد. برای طراحی برنامههای وب زیبا و واکنشپذیر، Tailwind CSS همه چیز لازم را فراهم میکند از جمله فرمهای ثبت نام، سبد خرید و نمایش محصولات. علاوه بر این، این چارچوب شامل فرمهای تسویه حساب، سبد خرید و نمایش محصول است که انتخاب ایدهآلی برای توسعه رابط کاربری مرتبط با تجارت الکترونیک بعدی شما است.
<nav class="flex space-x-2" aria-label="Tabs" role="tablist">
<button type="button" class="fc-tab-active:bg-primary fc-tab-active:text-white py-3 px-4 inline-flex items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-primary dark:hover:text-gray-400 active" id="pills-with-brand-color-item-1" data-fc-target="#pills-with-brand-color-1" aria-controls="pills-with-brand-color-1" role="tab">
Tab 1
</button>
<button type="button" class="fc-tab-active:bg-primary fc-tab-active:text-white py-3 px-4 inline-flex items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-primary dark:hover:text-gray-400" id="pills-with-brand-color-item-2" data-fc-target="#pills-with-brand-color-2" aria-controls="pills-with-brand-color-2" role="tab">
Tab 2
</button>
<button type="button" class="fc-tab-active:bg-primary fc-tab-active:text-white py-3 px-4 inline-flex items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-primary dark:hover:text-gray-400" id="pills-with-brand-color-item-3" data-fc-target="#pills-with-brand-color-3" aria-controls="pills-with-brand-color-3" role="tab">
Tab 3
</button>
</nav>
<div class="mt-3">
<div id="pills-with-brand-color-1" role="tabpanel" aria-labelledby="pills-with-brand-color-item-1">
<p class="text-gray-500 dark:text-gray-400">
Tailwind is a utility-first CSS framework that offers an extensive range of classes,
including flex, pt-4, text-center, and rotate-90. These classes can be combined to
construct any design directly in your markup, allowing you to build your next idea
even faster. Along with its efficiency, Tailwind also provides beautifully designed,
expertly crafted کامپوننت ها and templates, making it the perfect starting point for
your next project. With over 200+ professionally designed, fully responsive,
expertly crafted component examples at your disposal, you can seamlessly integrate
them into your Tailwind projects and customize them according to your preferences.
</p>
</div>
<div id="pills-with-brand-color-2" class="hidden" role="tabpanel" aria-labelledby="pills-with-brand-color-item-2">
<p class="text-gray-500 dark:text-gray-400">
Tailwind Elements simplifies the process of adding a dark mode to your project. By
utilizing Tailwind's classes and a dark variant, you can effortlessly integrate a
dual-themed website. Our کامپوننت ها come equipped with the dark theme variant as a
default feature. Furthermore, like any Tailwind project, the default theme can be
personalized by modifying the project's color palette, type scale, fonts,
breakpoints, border radius values, and other attributes through the
tailwind.config.js configuration file.
</p>
</div>
<div id="pills-with-brand-color-3" class="hidden" role="tabpanel" aria-labelledby="pills-with-brand-color-item-3">
<p class="text-gray-500 dark:text-gray-400">
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 مبتنی بر ابزارهای اولویتدار است که یک دسته وسیع از کلاسها را ارائه میدهد، شامل flex، pt-4، text-center و rotate-90. این کلاسها میتوانند ترکیب شوند تا هر طراحی را مستقیماً در نشانهگذاری خود ایجاد کنند و به شما این امکان را میدهند که ایده بعدی خود را حتی سریعتر پیادهسازی کنید. Tailwind همچنین علاوه بر کارایی خود، کامپوننتها و الگوهای زیبا و ماهرانهای ارائه میدهد که آن را به نقطه شروعی ایدهآل برای پروژه بعدی شما تبدیل میکند. با بیش از ۲۰۰ مثال کامپوننت به صورت حرفهای طراحی شده که در اختیار شما قرار دارد، میتوانید آنها را به طور بیدرنگ در پروژههای Tailwind خود یکپارچه سازی کرده و آنها را بر اساس نیازهای خود سفارشی کنید.
Tailwind Elements فرآیند اضافه کردن حالت تاریک به پروژههای شما را سادهتر میکند. با استفاده از کلاسهای Tailwind و نسخه تاریک، میتوانید به طور آسان یک وبسایت دو تمی ادغام کنید. کامپوننتهای ما به طور پیشفرض با نسخه تاریک تجهیز شدهاند. علاوه بر این، مانند هر پروژهی Tailwind دیگر، میتوانید تم پیشفرض را با تغییر پالت رنگ، مقیاس نوع، فونتها، شکست نقطه و مقادیر شعاع حاشیه و سایر ویژگیها از طریق پرونده پیکربندی tailwind.config.js شخصیسازی کنید.
Tailwind CSS یک روش بیدرز برای ساخت وبسایتهای مدرن بدون نیاز به ترکیب HTML است. این چارچوب عملکرد خود را با اسکن تمام پروندههای HTML شما، کامپوننتهای JavaScript و الگوها برای نامهای کلاس، به طور خودکار تولید استایلهای متناظر و نوشتن آنها به یک پرونده CSS استاتیک اعلام میکند. این رویکرد سریع، انعطافپذیر و قابل اعتماد است و نیازی به زمان اجرا ندارد. به هر کسی که نیاز به ایجاد طرحهای فرم، جدول یا پنجرههای مودال دارد، Tailwind CSS همه چیز لازم برای طراحی برنامههای وب زیبا و واکنشپذیر را فراهم میکند. علاوه بر این، این چارچوب شامل فرمهای تسویه حساب، سبد خرید و نمای محصول است که آن را انتخاب ایدهآل برای توسعه وبسایتهای جلوه تجارت الکترونیکی بعدی شما میسازد.
<nav class="flex space-x-2" aria-label="Tabs" role="tablist">
<button type="button" class="fc-tab-active:bg-primary fc-tab-active:text-white flex-auto py-3 px-4 inline-flex justify-center items-center gap-2 bg-transparent text-center text-sm font-medium text-gray-500 rounded-lg hover:text-primary dark:hover:text-gray-400 active" data-fc-target="#fill-and-justify-1" aria-controls="fill-and-justify-1" role="tab">
Tab 1
</button>
<button type="button" class="fc-tab-active:bg-primary fc-tab-active:text-white flex-auto py-3 px-4 inline-flex justify-center items-center gap-2 bg-transparent text-center text-sm font-medium text-gray-500 rounded-lg hover:text-primary dark:hover:text-gray-400" data-fc-target="#fill-and-justify-2" aria-controls="fill-and-justify-2" role="tab">
This is the longest link I've seen
</button>
<button type="button" class="fc-tab-active:bg-primary fc-tab-active:text-white flex-auto py-3 px-4 inline-flex justify-center items-center gap-2 bg-transparent text-center text-sm font-medium text-gray-500 rounded-lg hover:text-primary dark:hover:text-gray-400" data-fc-target="#fill-and-justify-3" aria-controls="fill-and-justify-3" role="tab">
Tab 3
</button>
</nav>
<div class="mt-3">
<div id="fill-and-justify-1" role="tabpanel" aria-labelledby="fill-and-justify-item-1">
<p class="text-gray-500 dark:text-gray-400">
Tailwind is a utility-first CSS framework that offers an extensive range of classes,
including flex, pt-4, text-center, and rotate-90. These classes can be combined to
construct any design directly in your markup, allowing you to build your next idea
even faster. Along with its efficiency, Tailwind also provides beautifully designed,
expertly crafted کامپوننت ها and templates, making it the perfect starting point for
your next project. With over 200+ professionally designed, fully responsive,
expertly crafted component examples at your disposal, you can seamlessly integrate
them into your Tailwind projects and customize them according to your preferences.
</p>
</div>
<div id="fill-and-justify-2" class="hidden" role="tabpanel" aria-labelledby="fill-and-justify-item-2">
<p class="text-gray-500 dark:text-gray-400">
Tailwind Elements simplifies the process of adding a dark mode to your project. By
utilizing Tailwind's classes and a dark variant, you can effortlessly integrate a
dual-themed website. Our کامپوننت ها come equipped with the dark theme variant as a
default feature. Furthermore, like any Tailwind project, the default theme can be
personalized by modifying the project's color palette, type scale, fonts,
breakpoints, border radius values, and other attributes through the
tailwind.config.js configuration file.
</p>
</div>
<div id="fill-and-justify-3" class="hidden" role="tabpanel" aria-labelledby="fill-and-justify-item-3">
<p class="text-gray-500 dark:text-gray-400">
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>