PresentationComponents
Forms
Checkbox
Copied
<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
<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>