PresentationComponents

Forms

Checkbox

Copied

My new check

<div class="w-full"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">My new check</span></label></div>

Image Upload

Copied

<div class="w-full">
    <div class="text-center">
       <input class="hidden" type="file">
       <div class="rounded-full mx-auto shadow-lg rounded max-w-100-px mb-4"><img class="rounded-full" src="https://demos.creative-tim.com/notus-pro-react/static/media/face-1.dbea4a4c.jpg" alt="..."></div>
       <div><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-blueGray-800 border-blueGray-800 active:bg-blueGray-900 active:border-blueGray-900 text-xs px-3 py-2 shadow hover:shadow-md rounded-md">change</button><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-red-500 border-red-500 active:bg-red-600 active:border-red-600 active:text-white text-xs px-3 py-2 shadow hover:shadow-md rounded-md">remove</button></div>
    </div>
 </div>

Incrementer

Copied

<div class="w-full">
    <div class="relative inline-flex flex-row w-full items-stretch">
       <div class="mr-2"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-orange-500 border-orange-500 active:bg-orange-600 active:border-orange-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md"><i class="fas fa-minus"></i></button></div>
       <div class="mr-2">
          <div class="mb-3 pt-0"><input type="text" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 " value="1"></div>
       </div>
       <div><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-orange-500 border-orange-500 active:bg-orange-600 active:border-orange-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md"><i class="fas fa-plus"></i></button></div>
    </div>
 </div>

Incrementer

With social colors.

Copied

<div class="w-full">
    <div class="relative inline-flex flex-row w-full items-stretch">
       <div class="mr-2"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-linkedin-regular border-linkedin-regular active:bg-linkedin-active active:border-linkedin-active text-sm px-6 py-2 shadow hover:shadow-lg rounded-md"><i class="fas fa-minus"></i></button></div>
       <div class="mr-2">
          <div class="mb-3 pt-0"><input type="text" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 " value="1"></div>
       </div>
       <div><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-linkedin-regular border-linkedin-regular active:bg-linkedin-active active:border-linkedin-active text-sm px-6 py-2 shadow hover:shadow-lg rounded-md"><i class="fas fa-plus"></i></button></div>
    </div>
 </div>

Progress

Copied

Profile completion

80%

<div class="w-full">
    <div class="relative w-full">
       <div class="flex mb-2 items-center justify-between">
          <div><span class="text-pink-500 bg-pink-200 text-xs font-bold inline-block py-1 uppercase uppercase last:mr-0 mr-1 leading-tight rounded-full px-3">Profile completion</span></div>
          <div class="text-right"><span class="text-xs font-semibold inline-block text-pink-500">80%</span></div>
       </div>
       <div class="overflow-hidden h-2 text-xs flex rounded bg-pink-200">
          <div class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-pink-500" style="width: 80%;"></div>
       </div>
    </div>
 </div>

Radio

Copied

My new radio

<div class="w-full"><label class="inline-flex items-center cursor-pointer"><input name="docs-radio-1" type="radio" class="form-radio appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-400 rounded-full checked:bg-blueGray-800 checked:border-blueGray-800 focus:border-blueGray-400"><span class="ml-2 text-sm font-semibold text-blueGray-700">My new radio</span></label></div>

Select

This is a regular Select.

Copied

<div class="w-full">
    <div class="relative">
       <div class="mb-3 pt-0"><input placeholder="Select color" type="text" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 " value=""></div>
       <div class="hidden z-50">
          <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Blue</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Green</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Teal</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Red</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Orange</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">White</a></div>
       </div>
    </div>
 </div>

Select

This is a small Select.

Copied

  <div class="w-full">
    <div class="relative">
       <div class="mb-3 pt-0"><input placeholder="Select color" type="text" class="border-blueGray-300 px-2 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 " value=""></div>
       <div class="hidden z-50">
          <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Blue</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Green</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Teal</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Red</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Orange</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">White</a></div>
       </div>
    </div>
 </div>

Select

This is a large Select.

Copied

<div class="w-full">
    <div class="relative">
       <div class="mb-3 pt-0"><input placeholder="Select color" type="text" class="border-blueGray-300 px-2 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 " value=""></div>
       <div class="hidden z-50">
          <div class=" absolute opacity-0 border bg-white text-base z-50 float-left p-2 text-left rounded-lg shadow-lg min-w-48 transition-all duration-200 ease-in-out transform scale-95 origin-top-left origin-top-right"><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Blue</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Green</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Teal</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Red</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">Orange</a><a href="javascript:;" class="text-sm px-3 py-2 font-normal block w-full whitespace-nowrap transition-all duration-200 hover:bg-blueGray-100 rounded">White</a></div>
       </div>
    </div>
 </div>