I'd love to get something like this going with TailwindCSS and inputs, is this possible? This specific component is written in Vue.js, I believe.

<div class="v-input theme--light v-text-field v-text-field--is-booted v-text-field--enclosed v-text-field--outlined">
   <div class="v-input__control">
      <div class="v-input__slot">
         <fieldset aria-hidden="true">
            <legend style="width: 0px;"><span>​</span></legend>
         </fieldset>
         <div class="v-text-field__slot"><label for="input-145" class="v-label theme--light" style="left: 0px; right: auto; position: absolute;">Link to visit (optional)</label><input id="input-145" type="text"></div>
      </div>
      <div class="v-text-field__details">
         <div class="v-messages theme--light">
            <div class="v-messages__wrapper"></div>
         </div>
         <div class="v-counter theme--light">0 / 200</div>
      </div>
   </div>
</div>

This is how it looks like.

CodePudding user response：

Yes it is possible. I have found 3 resources regarding this. Do check them out.

Material Tailwind Tailwind Components Dev