فرزاد عامری
8 ماه پیش توسط فرزاد عامری مطرح شد
3 پاسخ

Input در tailwind

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


ثبت پرسش جدید
آرتین کریمی
تخصص : طراح وب و برنامه نویس
@error.404 8 ماه پیش مطرح شد
0

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


سید آرین سید مومن
تخصص : junior security researcher
@arianseyed 8 ماه پیش مطرح شد
0

@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>

محمد رضا
تخصص : Full Stack Developer
@salar.mohammad2013 8 ماه پیش مطرح شد
0

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


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

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