Brunobkr/llama.cpp_AlgMor24_github

1<!doctype html>2<html lang="en">3  <head>4    <meta charset="UTF-8" />5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />6    <title>@tailwindcss/forms examples</title>7    <link rel="stylesheet" href="/dist/tailwind.css" />8  </head>9  <body>10    <div class="px-6 text-gray-900 antialiased">11      <div class="mx-auto max-w-xl divide-y py-12 md:max-w-4xl">12        <div class="py-8">13          <h1 class="text-4xl font-bold">@tailwindcss/forms examples</h1>14          <p class="mt-2 text-lg text-gray-600">15            An opinionated form reset designed to make form elements easy to style with utility16            classes.17          </p>18          <div class="mt-4 flex space-x-4">19            <a class="text-lg underline" href="https://github.com/tailwindlabs/tailwindcss-forms"20              >Documentation</a21            >22            <a class="text-lg underline" href="/kitchen-sink.html">Kitchen Sink</a>23          </div>24        </div>25        <div class="py-12">26          <h2 class="text-2xl font-bold">Unstyled</h2>27          <p class="mt-2 text-lg text-gray-600">This is how form elements look out of the box.</p>28          <div class="mt-8 max-w-md">29            <div class="grid grid-cols-1 gap-6">30              <label class="block">31                <span class="text-gray-700">Full name</span>32                <input type="text" class="mt-1 block w-full" placeholder="" />33              </label>34              <label class="block">35                <span class="text-gray-700">Email address</span>36                <input type="email" class="mt-1 block w-full" placeholder="john@example.com" />37              </label>38              <label class="block">39                <span class="text-gray-700">When is your event?</span>40                <input type="date" class="mt-1 block w-full" />41              </label>42              <label class="block">43                <span class="text-gray-700">What type of event is it?</span>44                <select class="mt-1 block w-full">45                  <option>Corporate event</option>46                  <option>Wedding</option>47                  <option>Birthday</option>48                  <option>Other</option>49                </select>50              </label>51              <label class="block">52                <span class="text-gray-700">Additional details</span>53                <textarea class="mt-1 block w-full" rows="3"></textarea>54              </label>55              <div class="block">56                <div class="mt-2">57                  <div>58                    <label class="inline-flex items-center">59                      <input type="checkbox" checked />60                      <span class="ml-2">Email me news and special offers</span>61                    </label>62                  </div>63                </div>64              </div>65            </div>66          </div>67        </div>68        <div class="py-12">69          <h2 class="text-2xl font-bold">Simple</h2>70          <div class="mt-8 max-w-md">71            <div class="grid grid-cols-1 gap-6">72              <label class="block">73                <span class="text-gray-700">Full name</span>74                <input75                  type="text"76                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"77                  placeholder=""78                />79              </label>80              <label class="block">81                <span class="text-gray-700">Email address</span>82                <input83                  type="email"84                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"85                  placeholder="john@example.com"86                />87              </label>88              <label class="block">89                <span class="text-gray-700">When is your event?</span>90                <input91                  type="date"92                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"93                />94              </label>95              <label class="block">96                <span class="text-gray-700">What type of event is it?</span>97                <select98                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"99                >100                  <option>Corporate event</option>101                  <option>Wedding</option>102                  <option>Birthday</option>103                  <option>Other</option>104                </select>105              </label>106              <label class="block">107                <span class="text-gray-700">Additional details</span>108                <textarea109                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"110                  rows="3"111                ></textarea>112              </label>113              <div class="block">114                <div class="mt-2">115                  <div>116                    <label class="inline-flex items-center">117                      <input118                        type="checkbox"119                        class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 focus:ring-offset-0"120                        checked121                      />122                      <span class="ml-2">Email me news and special offers</span>123                    </label>124                  </div>125                </div>126              </div>127            </div>128          </div>129        </div>130        <div class="py-12">131          <h2 class="text-2xl font-bold">Underline</h2>132          <div class="mt-8 max-w-md">133            <div class="grid grid-cols-1 gap-6">134              <label class="block">135                <span class="text-gray-700">Full name</span>136                <input137                  type="text"138                  class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"139                  placeholder=""140                />141              </label>142              <label class="block">143                <span class="text-gray-700">Email address</span>144                <input145                  type="email"146                  class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"147                  placeholder="john@example.com"148                />149              </label>150              <label class="block">151                <span class="text-gray-700">When is your event?</span>152                <input153                  type="date"154                  class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"155                />156              </label>157              <label class="block">158                <span class="text-gray-700">What type of event is it?</span>159                <select160                  class="mt-0 block w-full border-0 border-b-2 border-gray-200 pl-0.5 pr-10 focus:border-black focus:ring-0"161                >162                  <option>Corporate event</option>163                  <option>Wedding</option>164                  <option>Birthday</option>165                  <option>Other</option>166                </select>167              </label>168              <label class="block">169                <span class="text-gray-700">Additional details</span>170                <textarea171                  class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"172                  rows="2"173                ></textarea>174              </label>175              <div class="block">176                <div class="mt-2">177                  <div>178                    <label class="inline-flex items-center">179                      <input180                        type="checkbox"181                        class="border-2 border-gray-300 text-black focus:border-gray-300 focus:ring-black"182                      />183                      <span class="ml-2">Email me news and special offers</span>184                    </label>185                  </div>186                </div>187              </div>188            </div>189          </div>190        </div>191        <div class="py-12">192          <h2 class="text-2xl font-bold">Solid</h2>193          <div class="mt-8 max-w-md">194            <div class="grid grid-cols-1 gap-6">195              <label class="block">196                <span class="text-gray-700">Full name</span>197                <input198                  type="text"199                  class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"200                  placeholder=""201                />202              </label>203              <label class="block">204                <span class="text-gray-700">Email address</span>205                <input206                  type="email"207                  class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"208                  placeholder="john@example.com"209                />210              </label>211              <label class="block">212                <span class="text-gray-700">When is your event?</span>213                <input214                  type="date"215                  class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"216                />217              </label>218              <label class="block">219                <span class="text-gray-700">What type of event is it?</span>220                <select221                  class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"222                >223                  <option>Corporate event</option>224                  <option>Wedding</option>225                  <option>Birthday</option>226                  <option>Other</option>227                </select>228              </label>229              <label class="block">230                <span class="text-gray-700">Additional details</span>231                <textarea232                  class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"233                  rows="3"234                ></textarea>235              </label>236              <div class="block">237                <div class="mt-2">238                  <div>239                    <label class="inline-flex items-center">240                      <input241                        type="checkbox"242                        class="rounded border-transparent bg-gray-200 text-gray-700 focus:border-transparent focus:bg-gray-200 focus:ring-1 focus:ring-gray-500 focus:ring-offset-2"243                      />244                      <span class="ml-2">Email me news and special offers</span>245                    </label>246                  </div>247                </div>248              </div>249            </div>250          </div>251        </div>252      </div>253    </div>254  </body>255</html>256