ورود
AI Mode
ورود
<div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full backdrop-blur-md bg-white/70 dark:bg-zinc-900/70 border border-zinc-200/80 dark:border-zinc-800/80 shadow-sm" dir="rtl"> <span class="relative flex h-2.5 w-2.5"> <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"> </span> <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"> </span> </span> <span class="text-xs font-medium text-zinc-700 dark:text-zinc-300">آنلاین</span> </div>
A glassmorphic status badge component featuring a glowing pulsing dot and localized Persian text for online status, styled with Tailwind CSS and dark mode support.
نشانگر وضعیت
Status Badge with Dot
کد
پرامپت
<div class="max-w-xl p-6 bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-none shadow-sm" dir="rtl"> <h2 class="text-sm font-semibold text-stone-900 dark:text-stone-100 tracking-wider uppercase mb-6">روند اجرای پروژه</h2> <div class="relative border-r border-stone-200 dark:border-stone-800 mr-3 space-y-8"> <div class="relative pr-6"> <div class="absolute -right-1.5 top-1.5 w-3 h-3 bg-emerald-500 rounded-none ring-4 ring-white dark:ring-stone-900"> </div> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-1 mb-1"> <h3 class="text-sm font-medium text-stone-900 dark:text-stone-100">شروع فاز طراحی و معماری</h3> <span class="text-xs text-emerald-600 dark:text-emerald-400 font-mono">۱۴۰۳/۰۱/۱۵</span> </div> <p class="text-xs text-stone-600 dark:text-stone-400 leading-relaxed">بررسی نیازمندیهای سیستم و ترسیم ساختار اولیه اطلاعات و وایرفریمها.</p> </div> <div class="relative pr-6"> <div class="absolute -right-1.5 top-1.5 w-3 h-3 bg-violet-600 dark:bg-violet-500 rounded-none ring-4 ring-white dark:ring-stone-900"> </div> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-1 mb-1"> <h3 class="text-sm font-medium text-stone-900 dark:text-stone-100">توسعه بخش فرانتاند</h3> <span class="text-xs text-violet-600 dark:text-violet-400 font-mono">۱۴۰۳/۰۲/۰۱</span> </div> <p class="text-xs text-stone-600 dark:text-stone-400 leading-relaxed">پیادهسازی رابط کاربری با استفاده از سیستم طراحی و قوانین واکنشگرا.</p> </div> <div class="relative pr-6"> <div class="absolute -right-1.5 top-1.5 w-3 h-3 bg-amber-500 rounded-none ring-4 ring-white dark:ring-stone-900"> </div> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-1 mb-1"> <h3 class="text-sm font-medium text-stone-900 dark:text-stone-100">آزمایش و ارزیابی کیفیت</h3> <span class="text-xs text-amber-600 dark:text-amber-400 font-mono">در انتظار بررسی</span> </div> <p class="text-xs text-stone-600 dark:text-stone-400 leading-relaxed">تستهای نهایی سرعت، امنیت و پایداری عملکرد در محیطهای مختلف.</p> </div> <div class="relative pr-6"> <div class="absolute -right-1.5 top-1.5 w-3 h-3 bg-stone-300 dark:bg-stone-700 rounded-none ring-4 ring-white dark:ring-stone-900"> </div> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-1 mb-1"> <h3 class="text-sm font-medium text-stone-400 dark:text-stone-500">استقرار نهایی روی سرور</h3> <span class="text-xs text-stone-400 dark:text-stone-600 font-mono">برنامهریزی نشده</span> </div> <p class="text-xs text-stone-400 dark:text-stone-600 leading-relaxed">انتشار رسمی نسخه تولیدی و پایش مداوم وضعیت سرویسها.</p> </div> </div> </div>
A production-ready timeline component featuring 3-4 events with sharp corners (rounded-none), a technical editorial aesthetic, and semantic status indicators using emerald, violet, and amber accent colors in a dark-mode compatible layout.
گاهشمار
timeline
کد
پرامپت
<div dir="rtl" class="max-w-md w-full mx-auto p-4 bg-white dark:bg-zinc-900 rounded-3xl shadow-sm border border-zinc-200 dark:border-zinc-800"> <h3 class="text-sm font-medium text-zinc-900 dark:text-zinc-100 mb-6 px-1"> روند پیگیری سفارش </h3> <div class="relative border-r-2 border-rose-200 dark:border-rose-900/40 pr-5 space-y-6"> <div class="relative group"> <span class="absolute -right-[27px] top-1 w-3.5 h-3.5 rounded-full bg-rose-500 ring-4 ring-rose-100 dark:ring-rose-950/60"> </span> <div class="flex flex-col"> <span class="text-xs text-zinc-400 dark:text-zinc-500">۱۰ اردیبهشت - ۱۴:۳۰</span> <h4 class="text-sm font-semibold text-zinc-800 dark:text-zinc-200 mt-0.5">ثبت سفارش</h4> <p class="text-xs text-zinc-600 dark:text-zinc-400 mt-1 leading-relaxed">سفارش شما با موفقیت در سیستم ثبت شد و در صف بررسی قرار گرفت.</p> </div> </div> <div class="relative group"> <span class="absolute -right-[27px] top-1 w-3.5 h-3.5 rounded-full bg-rose-500 ring-4 ring-rose-100 dark:ring-rose-950/60"> </span> <div class="flex flex-col"> <span class="text-xs text-zinc-400 dark:text-zinc-500">۱۱ اردیبهشت - ۰۹:۱۵</span> <h4 class="text-sm font-semibold text-zinc-800 dark:text-zinc-200 mt-0.5">تایید و آمادهسازی</h4> <p class="text-xs text-zinc-600 dark:text-zinc-400 mt-1 leading-relaxed">بسته شما در انبار آماده بستهبندی و تحویل به پست شد.</p> </div> </div> <div class="relative group"> <span class="absolute -right-[27px] top-1 w-3.5 h-3.5 rounded-full bg-zinc-300 dark:bg-zinc-700 ring-4 ring-zinc-100 dark:ring-zinc-800"> </span> <div class="flex flex-col"> <span class="text-xs text-zinc-400 dark:text-zinc-500">در انتظار ارسال</span> <h4 class="text-sm font-semibold text-zinc-500 dark:text-zinc-400 mt-0.5">تحویل به پست</h4> <p class="text-xs text-zinc-500 dark:text-zinc-500 mt-1 leading-relaxed">پس از تحویل به پست، کد رهگیری برای شما پیامک خواهد شد.</p> </div> </div> </div> </div>
A modern, playful timeline component built with Tailwind CSS featuring pill-like styling, rose accent dots, and full dark mode support. Designed for tracking order progress or event steps in Persian (RTL).
گاهشمار مراحل
timeline events
کد
پرامپت
<form dir="rtl" class="w-full max-w-sm p-5 rounded-2xl bg-white/70 dark:bg-slate-900/70 backdrop-blur-md border border-slate-200/80 dark:border-slate-800/80 shadow-xl space-y-4"> <div class="space-y-1.5"> <label class="block text-xs font-medium text-slate-700 dark:text-slate-300">شماره کارت</label> <input type="text" dir="ltr" placeholder="۰۰۰۰-۰۰۰۰-۰۰۰۰-۰۰۰۰" maxlength="19" class="w-full px-3.5 py-2 text-sm rounded-lg bg-slate-50/50 dark:bg-slate-800/50 border border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-100 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-sky-500 dark:focus:ring-sky-400" /> </div> <div class="grid grid-cols-2 gap-3"> <div class="space-y-1.5"> <label class="block text-xs font-medium text-slate-700 dark:text-slate-300">تاریخ انقضا</label> <input type="text" dir="ltr" placeholder="ماه / سال" maxlength="5" class="w-full px-3.5 py-2 text-sm rounded-lg bg-slate-50/50 dark:bg-slate-800/50 border border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-100 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-sky-500 dark:focus:ring-sky-400" /> </div> <div class="space-y-1.5"> <label class="block text-xs font-medium text-slate-700 dark:text-slate-300">رمز دوم (CVV2)</label> <input type="password" dir="ltr" placeholder="•••" maxlength="4" class="w-full px-3.5 py-2 text-sm rounded-lg bg-slate-50/50 dark:bg-slate-800/50 border border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-100 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-sky-500 dark:focus:ring-sky-400" /> </div> </div> <button type="submit" class="w-full py-2.5 px-4 text-sm font-medium text-white bg-sky-600 hover:bg-sky-700 dark:bg-sky-500 dark:hover:bg-sky-600 rounded-lg shadow-md transition-colors focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">تایید و پرداخت</button> </form>
A production-ready glassmorphic payment card form component featuring card number, expiry date, and CVV inputs with a submit button, styled using Tailwind CSS with proper dark mode support and RTL layout.
فرم کارت بانکی
Payment Card Form
کد
پرامپت
<div class="relative inline-block text-right" x-data="{ open: false }"> <div> <button type="button" @click="open = !open" @click.away="open = false" class="inline-flex justify-center items-center w-full rounded-lg border border-stone-300 dark:border-stone-700 shadow-sm px-4 py-2 bg-white dark:bg-stone-900 text-sm font-medium text-stone-700 dark:text-stone-200 hover:bg-stone-50 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-stone-900 transition-colors duration-150"> <span>گزینههای مدیریت</span> <svg class="-ml-1 mr-2 h-5 w-5 text-stone-400 dark:text-stone-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /> </svg> </button> </div> <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-56 rounded-lg shadow-lg bg-white dark:bg-stone-900 ring-1 ring-black ring-opacity-5 dark:ring-stone-700 divide-y divide-stone-100 dark:divide-stone-800 focus:outline-none z-50" style="display: none;"> <div class="py-1" role="none"> <a href="#" @click="open = false" class="group flex items-center px-4 py-2 text-sm text-stone-700 dark:text-stone-200 hover:bg-amber-50 dark:hover:bg-amber-950/40 hover:text-amber-900 dark:hover:text-amber-300 transition-colors"> <svg class="ml-3 h-4 w-4 text-stone-400 group-hover:text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /> </svg> ویرایش مشخصات </a> <a href="#" @click="open = false" class="group flex items-center px-4 py-2 text-sm text-stone-700 dark:text-stone-200 hover:bg-amber-50 dark:hover:bg-amber-950/40 hover:text-amber-900 dark:hover:text-amber-300 transition-colors"> <svg class="ml-3 h-4 w-4 text-stone-400 group-hover:text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" /> </svg> کپی پیوند </a> </div> <div class="py-1" role="none"> <a href="#" @click="open = false" class="group flex items-center px-4 py-2 text-sm text-rose-600 dark:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-950/40 transition-colors"> <svg class="ml-3 h-4 w-4 text-rose-400 group-hover:text-rose-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /> </svg> حذف مورد </a> </div> </div> </div>
A production-ready dropdown menu navigation component in Tailwind CSS with Alpine.js state management. It features a neutral stone surface theme paired with bold amber brand highlights for interactive states, and semantic rose coloring for destructive actions. Built entirely with clean RTL layout and proper dark mode support.
منو کشویی
Dropdown Menu
کد
پرامپت
<nav dir="rtl" class="w-72 bg-zinc-50 dark:bg-zinc-900 border-l border-zinc-200 dark:border-zinc-800 p-4 space-y-6 font-sans" x-data="{ active: 2 }"> <div> <h3 class="px-3 text-xs font-semibold tracking-wider text-zinc-400 dark:text-zinc-500 uppercase">مدیریت محتوا</h3> <ul class="mt-2 space-y-1"> <li> <a href="#" @click.prevent="active = 1" :class="active === 1 ? 'bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-300 font-medium' : 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800'" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"> </path> </svg> <span>همه مقالات</span> </a> </li> <li> <a href="#" @click.prevent="active = 2" :class="active === 2 ? 'bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-300 font-medium' : 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800'" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"> </path> </svg> <span>افزودن مطلب جدید</span> </a> </li> <li> <a href="#" @click.prevent="active = 3" :class="active === 3 ? 'bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-300 font-medium' : 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800'" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"> </path> </svg> <span>پیشنویسها</span> <span class="mr-auto px-2 py-0.5 text-xs bg-zinc-200 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-300 rounded-full">۴</span> </a> </li> </ul> </div> <div> <h3 class="px-3 text-xs font-semibold tracking-wider text-zinc-400 dark:text-zinc-500 uppercase">تنظیمات</h3> <ul class="mt-2 space-y-1"> <li> <a href="#" @click.prevent="active = 4" :class="active === 4 ? 'bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-300 font-medium' : 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800'" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"> </path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"> </path> </svg> <span>پیکربندی</span> </a> </li> </ul> </div> </nav>
A minimalist sidebar navigation section with grouped links, categorized headings, clean typography, and interactive active state styling using emerald accents and zinc neutrals in Tailwind CSS.
منوی کناری
sidebar section
کد
پرامپت
<div class="w-full max-w-md mx-auto p-6 bg-slate-50 dark:bg-slate-900 border-2 border-slate-900 dark:border-slate-100 shadow-[4px_4px_0px_0px_#0f172a] dark:shadow-[4px_4px_0px_0px_f8fafc] rounded-xl" dir="rtl"> <div class="flex items-center justify-between relative"> <div class="absolute left-0 right-0 top-1/2 -translate-y-1/2 h-1 bg-slate-200 dark:bg-slate-800 -z-0"> </div> <div class="absolute right-0 top-1/2 -translate-y-1/2 h-1 bg-emerald-500 transition-all duration-300 -z-0" style="width: 50%"> </div> <div class="relative z-10 flex flex-col items-center group"> <div class="w-10 h-10 rounded-lg bg-emerald-500 text-white flex items-center justify-center font-bold border-2 border-slate-900 dark:border-slate-100 shadow-[2px_2px_0px_0px_#0f172a] dark:shadow-[2px_2px_0px_0px_#f8fafc]"> ۱ </div> <span class="mt-2 text-xs font-medium text-slate-700 dark:text-slate-300">شروع</span> </div> <div class="relative z-10 flex flex-col items-center group"> <div class="w-10 h-10 rounded-lg bg-emerald-500 text-white flex items-center justify-center font-bold border-2 border-slate-900 dark:border-slate-100 shadow-[2px_2px_0px_0px_#0f172a] dark:shadow-[2px_2px_0px_0px_#f8fafc]"> ۲ </div> <span class="mt-2 text-xs font-medium text-emerald-600 dark:text-emerald-400">بررسی</span> </div> <div class="relative z-10 flex flex-col items-center group"> <div class="w-10 h-10 rounded-lg bg-white dark:bg-slate-800 text-slate-400 dark:text-slate-500 flex items-center justify-center font-bold border-2 border-slate-900 dark:border-slate-100 shadow-[2px_2px_0px_0px_#0f172a] dark:shadow-[2px_2px_0px_0px_#f8fafc]"> ۳ </div> <span class="mt-2 text-xs font-medium text-slate-400 dark:text-slate-500">تایید</span> </div> <div class="relative z-10 flex flex-col items-center group"> <div class="w-10 h-10 rounded-lg bg-white dark:bg-slate-800 text-slate-400 dark:text-slate-500 flex items-center justify-center font-bold border-2 border-slate-900 dark:border-slate-100 shadow-[2px_2px_0px_0px_#0f172a] dark:shadow-[2px_2px_0px_0px_#f8fafc]"> ۴ </div> <span class="mt-2 text-xs font-medium text-slate-400 dark:text-slate-500">پایان</span> </div> </div> </div>
A production-ready Step Progress Dots component featuring 3D depth with hard offset shadows, emerald brand accents for completed states, and a modern slate neutral palette with full dark mode support in RTL layout.
مراحل پیشرفت
Step Progress Dots
کد
پرامپت
<div dir="rtl" class="max-w-md w-full bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 p-5 rounded-none space-y-4 shadow-sm"> <div class="flex items-center space-x-3 space-x-reverse"> <div class="relative w-12 h-12 bg-zinc-200 dark:bg-zinc-800 rounded-none overflow-hidden"> <div class="absolute inset-0 -translate-x-full animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-zinc-100/60 dark:via-zinc-700/30 to-transparent"> </div> </div> <div class="space-y-2 flex-1"> <div class="relative h-4 bg-zinc-200 dark:bg-zinc-800 w-3/4 rounded-none overflow-hidden"> <div class="absolute inset-0 -translate-x-full animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-zinc-100/60 dark:via-zinc-700/30 to-transparent"> </div> </div> <div class="relative h-3 bg-zinc-200 dark:bg-zinc-800 w-1/2 rounded-none overflow-hidden"> <div class="absolute inset-0 -translate-x-full animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-zinc-100/60 dark:via-zinc-700/30 to-transparent"> </div> </div> </div> </div> <div class="space-y-2 pt-2"> <div class="relative h-3 bg-zinc-200 dark:bg-zinc-800 w-full rounded-none overflow-hidden"> <div class="absolute inset-0 -translate-x-full animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-zinc-100/60 dark:via-zinc-700/30 to-transparent"> </div> </div> <div class="relative h-3 bg-zinc-200 dark:bg-zinc-800 w-5/6 rounded-none overflow-hidden"> <div class="absolute inset-0 -translate-x-full animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-zinc-100/60 dark:via-zinc-700/30 to-transparent"> </div> </div> <div class="relative h-3 bg-zinc-200 dark:bg-zinc-800 w-4/6 rounded-none overflow-hidden"> <div class="absolute inset-0 -translate-x-full animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-zinc-100/60 dark:via-zinc-700/30 to-transparent"> </div> </div> </div> <div class="flex justify-end pt-3"> <div class="relative h-8 w-24 bg-violet-200/50 dark:bg-violet-950/40 border border-violet-300 dark:border-violet-800 rounded-none overflow-hidden"> <div class="absolute inset-0 -translate-x-full animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-violet-100/60 dark:via-violet-700/30 to-transparent"> </div> </div> </div> </div>
A medium-scale skeleton shimmer lines component featuring sharp corners, technical layout, and a subtle violet accent on loading states, fully equipped with dual-theme styling and smooth shimmering animation blocks for content placeholders.
اسکلت بارگذاری
Skeleton Shimmer Lines
کد
پرامپت
<div x-data="{ show: true, progress: 75 }" class="fixed bottom-6 right-6 z-50" dir="rtl"> <button @click="window.scrollTo({ top: 0, behavior: 'smooth' })" :class="show ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0 pointer-events-none'" class="group relative flex items-center justify-center w-14 h-14 bg-amber-500 dark:bg-amber-600 text-stone-950 dark:text-stone-50 font-medium rounded-xl border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0px_0px_#1c1917] dark:shadow-[4px_4px_0px_0px_#f5f5f4] hover:shadow-[2px_2px_0px_0px_#1c1917] dark:hover:shadow-[2px_2px_0px_0px_#f5f5f4] hover:translate-x-[2px] hover:translate-y-[2px] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none transition-all duration-150"> <svg class="w-6 h-6 transition-transform duration-200 group-hover:-translate-y-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 10l7-7m0 0l7 7m-7-7v18"></path> </svg> </button> </div>
A production-ready Back-to-Top floating button component in Tailwind CSS featuring a 3D depth effect with hard offset shadows, an amber accent brand color, dual theme support, and smooth interactivity using Alpine.js.
بازگشت به بالا
Back to Top
کد
پرامپت
<div dir="rtl" class="inline-flex items-center gap-3 px-3 py-1.5 bg-white dark:bg-zinc-900 border-2 border-zinc-900 dark:border-zinc-100 shadow-[3px_3px_0px_0px_#18181b] dark:shadow-[3px_3px_0px_0px_#f4f4f5] text-xs font-bold text-zinc-900 dark:text-zinc-100"> <span class="relative flex h-2.5 w-2.5"> <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"> </span> <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"> </span> </span> <span>آنلاین</span> </div>
A brutalist status badge component featuring a glowing indicator dot, bold borders, harsh contrasting shadows, and dual theme support for online, busy, or offline states.
نشانگر وضعیت
Status Badge with Dot
کد
پرامپت
<div class="inline-flex items-center gap-2.5 px-3.5 py-1.5 rounded-full bg-teal-50 dark:bg-teal-950/40 border border-teal-200/80 dark:border-teal-800/60 shadow-sm"> <span class="flex items-center justify-center w-5 h-5 rounded-full bg-teal-500 text-white shrink-0"> <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"> <path stroke-linecap="round" stroke-linejoin="d" d="M5 13l4 4L19 7" /> </svg> </span> <span class="text-xs font-medium text-teal-800 dark:text-teal-300"> تایید شده </span> </div>
A playful, pill-shaped icon badge featuring a tinted teal tile background, an embedded inline SVG checkmark in a solid teal circle, and crisp Persian text for a status indicator.
نشانگر وضعیت
Status Icon Badge
کد
پرامپت
<div class="max-w-md mx-auto bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl p-5 shadow-sm" dir="rtl"> <div class="flex items-center justify-between pb-4 border-b border-zinc-100 dark:border-zinc-800"> <div class="flex items-center space-x-3 space-x-reverse"> <div class="p-2 bg-teal-50 dark:bg-teal-950/40 text-teal-600 dark:text-teal-400 rounded-lg"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"> </path> </svg> </div> <div> <h3 class="text-sm font-medium text-zinc-900 dark:text-zinc-100">تصویر پروفایل</h3> <p class="text-xs text-zinc-500 dark:text-zinc-400">فرمتهای JPG یا PNG (حداکثر ۵ مگابایت)</p> </div> </div> <span class="px-2.5 py-1 text-xs font-medium bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-800/60 rounded-full">تایید شده</span> </div> <div class="mt-4 border-2 border-dashed border-zinc-300 dark:border-zinc-700 hover:border-teal-500 dark:hover:border-teal-500 rounded-lg p-6 text-center transition-colors cursor-pointer bg-zinc-50/50 dark:bg-zinc-900/50"> <svg class="mx-auto h-8 w-8 text-zinc-400 dark:text-zinc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"> </path> </svg> <p class="mt-2 text-xs text-zinc-600 dark:text-zinc-300"> <span class="font-semibold text-teal-600 dark:text-teal-400">برای انتخاب فایل کلیک کنید</span> یا تصویر را اینجا رها کنید</p> </div> </div>
A modern, medium-scale photo upload tile component styled with a clean bordered card structure, featuring a teal decorative accent, an emerald verification badge, and full dark mode support.
بارگذاری عکس
Photo Upload Tile
کد
پرامپت
صفحه 1 از 11
صفحه بعد
کپی
کپی شد!
