- عناصر
- هشدارها
Default Alerts
کد
اصلی!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
ثانویه!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
موفق!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
هشدار!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
خطا!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
اطلاعات!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
<!-- primary -->
<div class="flex items-center p-3.5 rounded text-primary bg-primary-light dark:bg-primary-dark-light">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Primary!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- secondary -->
<div class="flex items-center p-3.5 rounded text-secondary bg-secondary-light dark:bg-secondary-dark-light">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Secondary!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- success -->
<div class="flex items-center p-3.5 rounded text-success bg-success-light dark:bg-success-dark-light">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Success!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- warning -->
<div class="flex items-center p-3.5 rounded text-warning bg-warning-light dark:bg-warning-dark-light">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- danger -->
<div class="flex items-center p-3.5 rounded text-danger bg-danger-light dark:bg-danger-dark-light">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Danger!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- info -->
<div class="flex items-center p-3.5 rounded text-info bg-info-light dark:bg-info-dark-light">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Info!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
هشدارهای طرح کلی
کد
اصلی!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
خطا!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
<!-- primary -->
<div class="flex items-center p-3.5 rounded text-white-dark border border-primary">
<span class="ltr:pr-2 rtl:pl-2">
<strong class="ltr:mr-2 rtl:ml-2">Primary!</strong>Lorem Ipsum is simply dummy text of the printing.
</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- danger -->
<div class="flex items-center border p-3.5 rounded text-white-dark border-danger">
<span class="ltr:pr-2 rtl:pl-2">
<strong class="ltr:mr-2 rtl:ml-2">Danger!</strong>Lorem Ipsum is simply dummy text of the printing.
</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
هشدارهای جامد
کد
هشدار!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
اطلاعات!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
<!-- primary -->
<div class="flex items-center p-3.5 rounded text-white bg-primary">
<span class="ltr:pr-2 rtl:pl-2">
<strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.
</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- warning -->
<div class="flex items-center p-3.5 rounded text-white bg-warning">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Info!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
هشدار با ایکن
کد
هشدار!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
هشدار!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
<!-- success -->
<div class="relative flex items-center border p-3.5 rounded text-success bg-success-light border-success ltr:border-l-[64px] rtl:border-r-[64px] dark:bg-success-dark-light">
<span class="absolute ltr:-left-11 rtl:-right-11 inset-y-0 text-white w-6 h-6 m-auto">
<svg> ... </svg>
</span>
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- dark -->
<div class="relative flex items-center border p-3.5 rounded text-dark bg-dark-light border-dark ltr:border-r-[64px] rtl:border-l-[64px] dark:bg-dark-dark-light dark:text-white-light dark:border-white-light/20">
<span class="absolute ltr:-right-11 rtl:-left-11 inset-y-0 text-white w-6 h-6 m-auto">
<svg> ... </svg>
</span>
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
هشدار با پیکان
کد
هشدار!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
هشدار!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
<!-- primary -->
<div class="relative flex items-center border p-3.5 rounded before:absolute before:top-1/2 ltr:before:left-0 rtl:before:right-0 rtl:before:rotate-180 before:-mt-2 before:border-l-8 before:border-t-8 before:border-b-8 before:border-t-transparent before:border-b-transparent before:border-l-inherit text-primary bg-primary-light !border-primary ltr:border-l-[64px] rtl:border-r-[64px] dark:bg-primary-dark-light">
<span class="absolute ltr:-left-11 rtl:-right-11 inset-y-0 text-white w-6 h-6 m-auto">
<svg> ... </svg>
</span>
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- danger -->
<div class="relative flex items-center border p-3.5 rounded before:inline-block before:absolute before:top-1/2 ltr:before:right-0 rtl:before:left-0 rtl:before:rotate-180 before:-mt-2 before:border-r-8 before:border-t-8 before:border-b-8 before:border-t-transparent before:border-b-transparent before:border-r-inherit text-danger bg-danger-light border-danger ltr:border-r-[64px] rtl:border-l-[64px] dark:bg-danger-dark-light">
<span class="absolute ltr:-right-11 rtl:-left-11 inset-y-0 text-white w-6 h-6 m-auto">
<svg> ... </svg>
</span>
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
سایر هشدار ها
کد
هشدار!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
هشدار!لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
<!-- info -->
<div class="flex items-center p-3.5 rounded text-white bg-info">
<span class="text-white w-6 h-6 ltr:mr-4 rtl:ml-4">
<svg> ... </svg>
</span>
<span><strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="btn btn-sm bg-white text-black ltr:ml-auto rtl:mr-auto">Accept</button>
<button type="button" class="ltr:ml-4 rtl:mr-4">
<svg> ... </svg>
</button>
</div>
<!-- gradient -->
<div class="flex items-center p-3.5 rounded text-white" style="background: rgb(188,26,78);background: linear-gradient(135deg, rgba(188,26,78,1) 0%, rgba(0,79,230,1) 100%);">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
<!-- image -->
<div class="flex items-center p-3.5 rounded text-white bg-[url('../images/menu-heade.jpg')] bg-no-repeat bg-center bg-cover">
<span class="ltr:pr-2 rtl:pl-2"><strong class="ltr:mr-1 rtl:ml-1">Warning!</strong>Lorem Ipsum is simply dummy text of the printing.</span>
<button type="button" class="ltr:ml-auto rtl:mr-auto hover:opacity-80">
<svg> ... </svg>
</button>
</div>
© . تمام حقوق مادی و معنوی محفوظ است.