راکت

Input در tailwind

3 پاسخ

سلام دوستان میخواستم تو tailwind یک فرم جستجو ایجاد کنم حالا میخوام یه اینپوت باشه که داخلش یه آیکون سرچ باشه من تو پیاده سازی آیکون موندم که چیکار کنم

ثبت پرسش جدید

پاسخ‌ها

3
آرتین کریمی
آرتین کریمی
@error.404

تخصص: طراح وب و برنامه نویس

میتونید از svg یا آیکون هایی که دانلود میکنید استفاده کنید
اندازه اون ها رو تا جایی که میخواید کوچک کنید
موفق و پیروز باشید

سید آرین سید مومن
سید آرین سید مومن
@arianseyed

تخصص: junior security researcher

@Farzadameri درود
فکر کنم این لینک مناسب باشه : کلیک کنید

این هم نمونه کد :

<!-- component -->
<div class="flex items-center justify-center w-screen h-screen bg-gray-800">
  <form method="GET">
    <div class="relative text-gray-600 focus-within:text-gray-400">
      <span class="absolute inset-y-0 left-0 flex items-center pl-2">
        <button type="submit" class="p-1 focus:outline-none focus:shadow-outline">
          <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        </button>
      </span>
      <input type="search" name="q" class="py-2 text-sm text-white bg-gray-900 rounded-md pl-10 focus:outline-none focus:bg-white focus:text-gray-900" placeholder="Search..." autocomplete="off">
    </div>
  </form>
</div>

شاید پاسخ شما همین‌جا باشد

محمد رضا
محمد رضا
@salar.mohammad2013

تخصص: Full Stack Developer

سلام
فرم جستجوی راکت بالای همین صفحه توش آیکون داره و با tailwind پیاده شده
کلاس ها همه چیش هم میبینی
ازش ایده بگیر

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام