- اجزاء
- لیست گروه بندی
ساده
نمونه کدگزینه یک
گزینه دو
گزینه سه
گزینه چهار
گزینه پنج
<!-- basic -->
<div class="flex flex-col rounded-md border border-[#e0e6ed] dark:border-[#1b2e4b]">
<div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5">گزینه یک</div>
<div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5">گزینه دو</div>
<div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 bg-primary text-white shadow-[0_1px_15px_1px_rgba(67,97,238,0.15)]">گزینه سه</div>
<div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5">گزینه چهار</div>
<div class="px-4 py-2.5">گزینه پنج</div>
</div>
لینک ها
نمونه کد
<!-- links -->
<div class="flex flex-col rounded-md border border-[#e0e6ed] dark:border-[#1b2e4b]">
<a href="javascript:;" class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10">گزینه یک</a>
<a href="javascript:;" class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10">گزینه دو</a>
<a href="javascript:;" class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 bg-primary text-white shadow-[0_1px_15px_1px_rgba(67,97,238,0.15)] hover:bg-[#eee] dark:hover:bg-[#eee]/10 hover:text-black dark:hover:text-white">گزینه سه</a>
<a href="javascript:;" class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10">گزینه چهار</a>
<a href="javascript:;" class="px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10">گزینه پنج</a>
</div>
آیکن ها
نمونه کدپیام ها
4 پیام جدید
مکان ها
25 مکان مسافرتی جدید
قابل انعطاف
سفارشی سازی منعطف
<!-- icons -->
<div class="flex flex-col rounded-md border border-[#e0e6ed] dark:border-[#1b2e4b]">
<div class="flex border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10">
<div class="ltr:mr-2 rtl:ml-2.5 mt-0.5 text-primary">
<svg> ... </svg>
</div>
<div class="flex-1 font-semibold">
<h6 class="mb-1 text-base">Messages</h6>
<p class="text-xs">4 New Messages</p>
</div>
</div>
<div class="flex border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 bg-primary text-white shadow-[0_1px_15px_1px_rgba(67,97,238,0.15)] hover:bg-[#eee] dark:hover:bg-[#eee]/10 hover:text-black dark:hover:text-white group">
<div class="ltr:mr-2 rtl:ml-2.5 mt-0.5 text-white group-hover:text-primary">
<svg> ... </svg>
</div>
<div class="flex-1 font-semibold">
<h6 class="mb-1 text-base">Locations</h6>
<p class="text-xs">25 New Travel Locations</p>
</div>
</div>
<div class="flex px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10">
<div class="ltr:mr-2 rtl:ml-2.5 mt-0.5 text-primary">
<svg> ... </svg>
</div>
<div class="flex-1 font-semibold">
<h6 class="mb-1 text-base">Flexible</h6>
<p class="text-xs">Customization Flexibility</p>
</div>
</div>
</div>
تصاویر
نمونه کد
رضا علوی
مدیر پروژه
سهیلا
طراح وب
سهراب
برنامه نویس
<!-- images -->
<div class="flex flex-col rounded-md border border-[#e0e6ed] dark:border-[#1b2e4b]">
<div class="flex border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10">
<div class="ltr:mr-3 rtl:ml-3">
<img src="/assets/images/profile-1.jpeg" alt="image" class="rounded-full w-12 h-12 object-cover" />
</div>
<div class="flex-1 font-semibold">
<h6 class="mb-1 text-base">Luke Ivory</h6>
<p class="text-xs">Project Lead</p>
</div>
</div>
<div class="flex border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 bg-primary text-white shadow-[0_1px_15px_1px_rgba(67,97,238,0.15)] hover:bg-[#eee] dark:hover:bg-[#eee]/10 hover:text-black dark:hover:text-white group">
<div class="ltr:mr-3 rtl:ml-3">
<img src="/assets/images/profile-2.jpeg" alt="image" class="rounded-full w-12 h-12 object-cover" />
</div>
<div class="flex-1 font-semibold">
<h6 class="mb-1 text-base">Sonia Shaw</h6>
<p class="text-xs">Web Designer</p>
</div>
</div>
<div class="flex px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10">
<div class="ltr:mr-3 rtl:ml-3">
<img src="/assets/images/profile-3.jpeg" alt="image" class="rounded-full w-12 h-12 object-cover" />
</div>
<div class="flex-1 font-semibold">
<h6 class="mb-1 text-base">Dale Butler</h6>
<p class="text-xs">Developer</p>
</div>
</div>
</div>
وظیفه
نمونه کد
<!-- task -->
<div class="flex flex-col rounded-md border border-[#e0e6ed] dark:border-[#1b2e4b]">
<div class="flex space-x-4 rtl:space-x-reverse border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10">
<input id="tack_checkbox1" type="checkbox" class="form-checkbox" />
<label for="tack_checkbox1" class="mb-0 cursor-pointer">گروه های لیست یک جزء انعطاف پذیر و قدرتمند برای نمایش ساده هستند. <span class="badge bg-secondary my-auto ltr:ml-3 rtl:mr-3 hover:top-0">Project</span></label>
</div>
<div class="flex space-x-4 rtl:space-x-reverse border-b border-[#e0e6ed] dark:border-[#1b2e4b] px-4 py-2.5 bg-primary text-white shadow-[0_1px_15px_1px_rgba(67,97,238,0.15)] hover:bg-[#eee] dark:hover:bg-[#eee]/10 hover:text-black dark:hover:text-white group">
<input id="tack_checkbox2" type="checkbox" class="form-checkbox" />
<label for="tack_checkbox2" class="mb-0 cursor-pointer">گروه های لیست یک جزء انعطاف پذیر و قدرتمند برای نمایش ساده هستند. <span class="badge bg-info my-auto ltr:ml-3 rtl:mr-3 hover:top-0">فوری</span></label>
</div>
<div class="flex space-x-4 rtl:space-x-reverse px-4 py-2.5 hover:bg-[#eee] dark:hover:bg-[#eee]/10">
<input id="tack_checkbox3" type="checkbox" class="form-checkbox" />
<label for="tack_checkbox3" class="mb-0 cursor-pointer">گروه های لیست یک جزء انعطاف پذیر و قدرتمند برای نمایش ساده هستند. <span class="badge bg-success my-auto ltr:ml-3 rtl:mr-3 hover:top-0">Success</span></label>
</div>
</div>
© روشاک