This post is saved as a draft.
#e8e8e8
HTML +TailwindCSS
1<main class="p-6"> 2 <form class="bg-white p-6 rounded-md shadow-md"> 3 <div class="flex items-center border border-gray-300 rounded-md"> 4 <button class="p-2 hover:bg-gray-100 focus:outline-none" type="button"> 5 <svg 6 xmlns="http://www.w3.org/2000/svg" 7 fill="none" 8 class="h-6 w-6 text-gray-600" 9 viewBox="0 0 24 24" 10 > 11 <g stroke-width="0" id="SVGRepo_bgCarrier"></g> 12 <g 13 stroke-linejoin="round" 14 stroke-linecap="round" 15 id="SVGRepo_tracerCarrier" 16 ></g> 17 <g id="SVGRepo_iconCarrier"> 18 <path 19 stroke-linejoin="round" 20 stroke-linecap="round" 21 stroke-width="2" 22 stroke="#000000" 23 d="M8 16L12 12M12 12L16 16M12 12V21M20 16.7428C21.2215 15.734 22 14.2079 22 12.5C22 9.46243 19.5376 7 16.5 7C16.2815 7 16.0771 6.886 15.9661 6.69774C14.6621 4.48484 12.2544 3 9.5 3C5.35786 3 2 6.35786 2 10.5C2 12.5661 2.83545 14.4371 4.18695 15.7935" 24 ></path> 25 </g> 26 </svg> 27 </button> 28 29 <input 30 class="flex-grow p-2 border-none focus:ring-0 focus:outline-none" 31 placeholder="Enter your prompt..." 32 type="text" 33 /> 34 35 <button class="p-2 hover:bg-gray-100 focus:outline-none" type="submit"> 36 <svg 37 xmlns="http://www.w3.org/2000/svg" 38 fill="none" 39 class="h-6 w-6 text-gray-600" 40 viewBox="0 -0.5 25 25" 41 > 42 <g stroke-width="0" id="SVGRepo_bgCarrier"></g> 43 <g 44 stroke-linejoin="round" 45 stroke-linecap="round" 46 id="SVGRepo_tracerCarrier" 47 ></g> 48 <g id="SVGRepo_iconCarrier"> 49 <path 50 stroke-linejoin="round" 51 stroke-linecap="round" 52 stroke-width="1.5" 53 stroke="#000000" 54 d="M18.455 9.8834L7.063 4.1434C6.76535 3.96928 6.40109 3.95274 6.08888 4.09916C5.77667 4.24558 5.55647 4.53621 5.5 4.8764C5.5039 4.98942 5.53114 5.10041 5.58 5.2024L7.749 10.4424C7.85786 10.7903 7.91711 11.1519 7.925 11.5164C7.91714 11.8809 7.85789 12.2425 7.749 12.5904L5.58 17.8304C5.53114 17.9324 5.5039 18.0434 5.5 18.1564C5.55687 18.4961 5.77703 18.7862 6.0889 18.9323C6.40078 19.0785 6.76456 19.062 7.062 18.8884L18.455 13.1484C19.0903 12.8533 19.4967 12.2164 19.4967 11.5159C19.4967 10.8154 19.0903 10.1785 18.455 9.8834V9.8834Z" 55 clip-rule="evenodd" 56 fill-rule="evenodd" 57 ></path> 58 </g> 59 </svg> 60 </button> 61 </div> 62 </form> 63</main> 64
Variation of aform
Variation of aform