Create Forms (CRUD)
Get started with a collection of forms crafted for the "create" action from the CRUD layouts featuring form elements coded in Tailwind CSS.
- Requires Flowbite JS
Default form
Use this free example of a form based on the CRUD layouts where you can create a new data entry inside your dashboard.
Default form
html
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-2xl lg:py-16">
<h2 class="mb-4 text-xl font-bold text-gray-900 dark:text-white">
Add a new product
</h2>
<form action="#">
<div class="grid gap-4 sm:grid-cols-2 sm:gap-6">
<div class="sm:col-span-2">
<label
for="name"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Product Name</label
>
<input
type="text"
name="name"
id="name"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Type product name"
required=""
/>
</div>
<div class="w-full">
<label
for="brand"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Brand</label
>
<input
type="text"
name="brand"
id="brand"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Product brand"
required=""
/>
</div>
<div class="w-full">
<label
for="price"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Price</label
>
<input
type="number"
name="price"
id="price"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="$2999"
required=""
/>
</div>
<div>
<label
for="category"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Category</label
>
<select
id="category"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
>
<option selected="">Select category</option>
<option value="TV">TV/Monitors</option>
<option value="PC">PC</option>
<option value="GA">Gaming/Console</option>
<option value="PH">Phones</option>
</select>
</div>
<div>
<label
for="item-weight"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Item Weight (kg)</label
>
<input
type="number"
name="item-weight"
id="item-weight"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="12"
required=""
/>
</div>
<div class="sm:col-span-2">
<label
for="description"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Description</label
>
<textarea
id="description"
rows="8"
class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Your description here"
></textarea>
</div>
</div>
<button
type="submit"
class="inline-flex items-center px-5 py-2.5 mt-4 sm:mt-6 text-sm font-medium text-center text-white bg-primary-700 rounded-lg focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-900 hover:bg-primary-800"
>
Add product
</button>
</form>
</div>
</section>Create event form
Use this example of an advanced CRUD form to create an event data entry featuring date range picker input fields, WYSIWYG editors, and more.
to enable the datepicker make sure you install this plugin: https://flowbite.com/docs/plugins/datepicker/
Create event form
html
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto md:max-w-6xl lg:py-16">
<h2 class="mb-4 text-xl font-bold text-gray-900 dark:text-white">
Add a new event
</h2>
<form action="#">
<div class="gap-4 sm:grid sm:grid-cols-2 xl:grid-cols-3 sm:gap-6 sm:mb-2">
<div class="mb-4 space-y-4 xl:col-span-2">
<div>
<label
for="title"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Title</label
>
<input
type="text"
name="title"
id="title"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Add title here"
required=""
/>
</div>
<div>
<label
for="date_start"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Select Date</label
>
<div
date-rangepicker
class="items-center space-y-4 md:flex md:space-y-0"
>
<div class="relative w-full">
<div
class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"
>
<svg
aria-hidden="true"
class="w-5 h-5 text-gray-500 dark:text-gray-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
clip-rule="evenodd"
></path>
</svg>
</div>
<input
id="date_start"
name="start"
type="text"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 datepicker-input"
placeholder="Select date start"
/>
</div>
<span class="hidden text-gray-500 md:mx-4 md:flex">to</span>
<div class="relative w-full">
<div
class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"
>
<svg
aria-hidden="true"
class="w-5 h-5 text-gray-500 dark:text-gray-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
clip-rule="evenodd"
></path>
</svg>
</div>
<input
id="date_end"
name="end"
type="text"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 datepicker-input"
placeholder="Select date end"
/>
</div>
</div>
</div>
<div class="flex items-center space-x-3">
<div class="flex items-center w-20">
<input
id="event-duration-checkbox"
type="checkbox"
value=""
class="w-4 h-4 bg-gray-100 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label
for="event-duration-checkbox"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>All day</label
>
</div>
<label for="time" class="sr-only">Select an option</label>
<select
id="time"
class="w-48 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
>
<option selected>Does not repeat</option>
<option value="DA">Daily</option>
<option value="WW">Weekly on Wednesday</option>
<option value="EW">Every weekday</option>
<option value="CU">Custom</option>
</select>
</div>
<button
type="button"
class="text-white !bg-[#4285F4] hover:!bg-[#4285F4]/90 focus:ring-4 focus:outline-none focus:!ring-[#4285F4]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-![#4285F4]/55 mr-2 mb-2"
>
<svg
aria-hidden="true"
class="mr-2 -ml-1 w-4 h-4"
aria-hidden="true"
focusable="false"
data-prefix="fab"
data-icon="google"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 488 512"
>
<path
fill="currentColor"
d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
></path>
</svg>
Add Google Meet video conference
</button>
<div>
<div
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Tag Color
</div>
<div class="flex items-center space-x-2">
<button
type="button"
class="w-6 h-6 !bg-purple-500 rounded-sm"
></button>
<button
type="button"
class="w-6 h-6 !bg-indigo-500 rounded-sm"
></button>
<button
type="button"
class="w-6 h-6 rounded-sm bg-primary-600"
></button>
<button
type="button"
class="w-6 h-6 !bg-pink-500 rounded-sm"
></button>
<button
type="button"
class="w-6 h-6 !bg-teal-400 rounded-sm"
></button>
<button
type="button"
class="w-6 h-6 !bg-green-400 rounded-sm"
></button>
<button
type="button"
class="w-6 h-6 !bg-yellow-300 rounded-sm"
></button>
<button
type="button"
class="w-6 h-6 !bg-orange-400 rounded-sm"
></button>
<button
type="button"
class="w-6 h-6 !bg-red-500 rounded-sm"
></button>
</div>
</div>
<div>
<label
for="description"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Description</label
>
<div
class="mb-4 w-full bg-gray-100 rounded-lg border border-gray-200 dark:bg-gray-600 dark:border-gray-600"
>
<div
class="flex justify-between items-center py-2 px-3 border-b dark:border-gray-600"
>
<div
class="flex flex-wrap items-center divide-gray-200 sm:divide-x dark:divide-gray-600"
>
<div class="flex items-center space-x-1 sm:pr-4">
<button
type="button"
class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Attach file</span>
</button>
<button
type="button"
class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Embed map</span>
</button>
<button
type="button"
class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Upload image</span>
</button>
<button
type="button"
class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Format code</span>
</button>
<button
type="button"
class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zm-.464 5.535a1 1 0 10-1.415-1.414 3 3 0 01-4.242 0 1 1 0 00-1.415 1.414 5 5 0 007.072 0z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Add emoji</span>
</button>
</div>
<div
class="hidden flex-wrap items-center space-x-1 sm:flex sm:pl-4"
>
<button
type="button"
class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Timeline</span>
</button>
<button
type="button"
class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Download</span>
</button>
</div>
</div>
<button
type="button"
data-tooltip-target="tooltip-fullscreen"
class="p-2 text-gray-500 rounded cursor-pointer sm:ml-auto hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 4a1 1 0 011-1h4a1 1 0 010 2H6.414l2.293 2.293a1 1 0 11-1.414 1.414L5 6.414V8a1 1 0 01-2 0V4zm9 1a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V6.414l-2.293 2.293a1 1 0 11-1.414-1.414L13.586 5H12zm-9 7a1 1 0 012 0v1.586l2.293-2.293a1 1 0 111.414 1.414L6.414 15H8a1 1 0 010 2H4a1 1 0 01-1-1v-4zm13-1a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 010-2h1.586l-2.293-2.293a1 1 0 111.414-1.414L15 13.586V12a1 1 0 011-1z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Full screen</span>
</button>
<div
id="tooltip-fullscreen"
role="tooltip"
class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700"
data-popper-reference-hidden=""
data-popper-escaped=""
data-popper-placement="bottom"
style="
position: absolute;
inset: 0px auto auto 0px;
margin: 0px;
transform: translate3d(0px, 335px, 0px);
"
>
Show full screen
<div class="tooltip-arrow" data-popper-arrow=""></div>
</div>
</div>
<div class="py-2 px-4 bg-gray-50 rounded-b-lg dark:bg-gray-700">
<textarea
id="description"
rows="8"
class="block px-0 w-full text-sm text-gray-800 bg-gray-50 border-0 dark:bg-gray-700 focus:ring-0 dark:text-white dark:placeholder-gray-400"
placeholder="Write a description here"
required=""
></textarea>
</div>
</div>
</div>
<div>
<div
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Reminder
</div>
<div class="space-y-4 md:flex md:space-y-0 md:space-x-4">
<div class="w-full">
<label for="reminder-type" class="sr-only">Reminder type</label>
<select
id="reminder-type"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
>
<option selected="">Notification</option>
<option value="AL">Alarm</option>
<option value="EM">Email</option>
<option value="SM">SMS</option>
</select>
</div>
<div class="w-full">
<label for="reminder-counter" class="sr-only">Counter</label>
<input
type="number"
name="reminder-counter"
id="reminder-counter-days"
class="bg-gray-50 text-sm border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="1"
required=""
/>
</div>
<div class="w-full">
<label for="reminder-length-type" class="sr-only">Length</label>
<select
id="reminder-length-type"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
>
<option selected="">Days</option>
<option value="WE">Weeks</option>
<option value="MO">Months</option>
</select>
</div>
</div>
</div>
</div>
<div class="mb-4 space-y-4">
<div>
<label
for="add-guests"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Add guests</label
>
<div class="relative">
<input
type="text"
id="add-guests"
class="block p-3 pl-4 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Add guest email"
required=""
/>
<button
type="button"
class="text-white absolute inline-flex items-center right-2.5 bottom-2.5 bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-xs px-3 py-1.5 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
<svg
class="w-4 h-4 -ml-0.5 mr-0.5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
clip-rule="evenodd"
></path>
</svg>
Add
</button>
</div>
</div>
<div class="items-center md:flex md:space-x-4">
<div class="flex flex-shrink-0 mb-4 -space-x-4 md:mb-0">
<img
class="w-8 h-8 rounded-full border-2 border-white dark:border-gray-800"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/helene-engels.png"
alt="Helene Engels"
/>
<img
class="w-8 h-8 rounded-full border-2 border-white dark:border-gray-800"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/robert-brown.png"
alt="Robert Brown"
/>
<img
class="w-8 h-8 rounded-full border-2 border-white dark:border-gray-800"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png"
alt="Bonnie Green"
/>
<a
class="flex justify-center items-center w-8 h-8 text-xs font-medium text-white bg-gray-700 rounded-full border-2 border-white hover:bg-gray-600 dark:border-gray-800"
href="#"
>+9</a
>
</div>
<button
type="button"
class="inline-flex items-center py-2 px-3 text-xs font-medium text-gray-900 bg-white rounded-lg border border-gray-200 focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
<svg
aria-hidden="true"
class="mr-1 -ml-1 w-4 h-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
clip-rule="evenodd"
></path>
</svg>
Add member
</button>
<button
type="button"
class="inline-flex items-center py-2 px-3 ml-2 text-xs font-medium text-gray-900 bg-white rounded-lg border border-gray-200 sm:ml-0 focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
<svg
aria-hidden="true"
class="mr-1 -ml-1 w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
Find a time
</button>
</div>
<div>
<label
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Guest Permissions</label
>
<div class="space-y-3">
<div class="flex items-center mr-4">
<input
id="guest-permission-1-checkbox"
type="checkbox"
value=""
name="guest-permission-checkbox"
class="w-4 h-4 bg-gray-100 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label
for="guest-permission-1-checkbox"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>Modify event</label
>
</div>
<div class="flex items-center mr-4">
<input
id="guest-permission-2-checkbox"
type="checkbox"
value=""
name="guest-permission-checkbox"
class="w-4 h-4 bg-gray-100 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label
for="guest-permission-2-checkbox"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>Invite others</label
>
</div>
<div class="flex items-center mr-4">
<input
checked=""
id="guest-permission-3-checkbox"
type="checkbox"
value=""
name="guest-permission-checkbox"
class="w-4 h-4 bg-gray-100 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label
for="guest-permission-3-checkbox"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>See guest list</label
>
</div>
</div>
</div>
</div>
</div>
<button
type="submit"
class="text-white justify-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
Add new event
</button>
</form>
</div>
</section>
<script src="https://unpkg.com/flowbite@1.5.3/dist/datepicker.js"></script>Create user form
This example of a CRUD form can be used to create a user in the database featuring the first name, last name, password, and biography as text input fields.
Create user form
html
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-2xl lg:py-16">
<h2 class="mb-4 text-xl font-bold text-gray-900 dark:text-white">
Add a new user
</h2>
<form action="#">
<div class="grid gap-4 sm:grid-cols-2 sm:gap-6">
<div>
<label
for="first-name"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>First Name</label
>
<input
type="text"
name="first-name"
id="first-name"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="First name"
required=""
/>
</div>
<div class="w-full">
<label
for="last-name"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Last Name</label
>
<input
type="text"
name="last-name"
id="last-name"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Last name"
required=""
/>
</div>
<div>
<label
for="password"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Password</label
>
<input
type="password"
name="password"
id="password"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="•••••••••"
required=""
/>
</div>
<div>
<label
for="confirm-password"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Confirm password</label
>
<input
type="password"
name="confirm-password"
id="confirm-password"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="•••••••••"
required=""
/>
</div>
<div class="sm:col-span-2">
<label
for="biography"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Biography</label
>
<textarea
id="biography"
rows="8"
class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Your description here"
></textarea>
</div>
</div>
<button
type="submit"
class="inline-flex items-center px-5 py-2.5 mt-4 sm:mt-6 text-sm font-medium text-center text-white bg-primary-700 rounded-lg focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-900 hover:bg-primary-800"
>
Add user
</button>
</form>
</div>
</section>Create form with accordion
Use this CRUD form with accordions to separate the content inside when creating new advanced data entries with multiple text input fields, date pickers, dropzone upload input fields, and more.
to use the datepicker make sure to install this plugin: https://flowbite.com/docs/plugins/datepicker/
Create form with accordion
html
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-5xl lg:py-16">
<form action="#">
<div id="create-product-accordion-collapse" data-accordion="collapse">
<h2 id="create-product-accordion-collapse-heading-1">
<button
type="button"
class="flex justify-between items-center py-4 px-4 w-full font-medium leading-none text-left text-gray-900 bg-gray-50 sm:px-5 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600"
data-accordion-target="#create-product-accordion-collapse-body-1"
aria-expanded="true"
aria-controls="create-product-accordion-collapse-body-1"
>
<span>General Information</span>
<svg
data-accordion-icon=""
class="w-6 h-6 rotate-180 shrink-0"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
</h2>
<div
id="create-product-accordion-collapse-body-1"
class=""
aria-labelledby="create-product-accordion-collapse-heading-1"
>
<div class="py-4 border-gray-200 sm:py-5 dark:border-gray-700">
<!-- Inputs -->
<div class="grid gap-4 md:gap-6 md:grid-cols-2">
<!-- Column -->
<div class="space-y-4 sm:space-y-6">
<div>
<label
for="name"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Product Name</label
>
<input
type="text"
name="name"
id="name"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Type product name"
required=""
/>
</div>
<div class="space-y-4 sm:flex sm:space-x-4 sm:space-y-0">
<div class="w-full">
<label
for="brand"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Brand</label
>
<input
type="text"
name="brand"
id="brand"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Product brand"
required=""
/>
</div>
<div class="w-full">
<label
for="price"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Price</label
>
<input
type="number"
name="price"
id="price"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="$2999"
required=""
/>
</div>
</div>
<div class="space-y-4 sm:flex sm:space-x-4 sm:space-y-0">
<div class="w-full">
<label
for="category"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Category</label
>
<select
id="category"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
>
<option selected="">Select category</option>
<option value="TV">TV/Monitors</option>
<option value="PC">PC</option>
<option value="GA">Gaming/Console</option>
<option value="PH">Phones</option>
</select>
</div>
<div class="w-full">
<label
for="return-policy"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Return Policy</label
>
<select
id="return-policy"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
>
<option selected="">30 days</option>
<option value="10">10 days</option>
<option value="NO">None</option>
</select>
</div>
</div>
<div class="space-y-4 sm:flex sm:space-x-4 sm:space-y-0">
<div class="w-full">
<label
for="shipping"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Ships From</label
>
<input
type="text"
name="shipping"
id="shipping"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Bergside Inc."
required=""
/>
</div>
<div class="w-full">
<label
for="sold-by"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Sold By</label
>
<input
type="text"
name="sold-by"
id="sold-by"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Flowbite LLC"
required=""
/>
</div>
</div>
<div class="space-y-4 sm:flex sm:space-x-4 sm:space-y-0">
<div class="w-full">
<label
for="import-fees"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Import Fees</label
>
<input
type="number"
name="import-fees"
id="import-fees"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="0"
required=""
/>
</div>
<div class="w-full">
<label
for="product-state"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Product State</label
>
<select
id="product-state"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
>
<option selected="">New</option>
<option value="RE">Refurbished</option>
</select>
</div>
</div>
<div>
<label
for="description"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Description</label
>
<div
class="mb-4 w-full bg-gray-100 rounded-lg border border-gray-200 dark:bg-gray-700 dark:border-gray-600"
>
<div
class="flex justify-between items-center py-2 px-3 border-b dark:border-gray-600"
>
<div
class="flex flex-wrap items-center divide-gray-200 sm:divide-x dark:divide-gray-600"
>
<div class="flex items-center space-x-1 sm:pr-4">
<button
type="button"
class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Attach file</span>
</button>
<button
type="button"
class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Embed map</span>
</button>
<button
type="button"
class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Upload image</span>
</button>
<button
type="button"
class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Format code</span>
</button>
<button
type="button"
class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zm-.464 5.535a1 1 0 10-1.415-1.414 3 3 0 01-4.242 0 1 1 0 00-1.415 1.414 5 5 0 007.072 0z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Add emoji</span>
</button>
</div>
<div
class="hidden flex-wrap items-center space-x-1 sm:flex sm:pl-4"
>
<button
type="button"
class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Timeline</span>
</button>
<button
type="button"
class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Download</span>
</button>
</div>
</div>
<button
type="button"
data-tooltip-target="tooltip-fullscreen"
class="p-2 text-gray-500 rounded cursor-pointer sm:ml-auto hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 4a1 1 0 011-1h4a1 1 0 010 2H6.414l2.293 2.293a1 1 0 11-1.414 1.414L5 6.414V8a1 1 0 01-2 0V4zm9 1a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V6.414l-2.293 2.293a1 1 0 11-1.414-1.414L13.586 5H12zm-9 7a1 1 0 012 0v1.586l2.293-2.293a1 1 0 111.414 1.414L6.414 15H8a1 1 0 010 2H4a1 1 0 01-1-1v-4zm13-1a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 010-2h1.586l-2.293-2.293a1 1 0 111.414-1.414L15 13.586V12a1 1 0 011-1z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Full screen</span>
</button>
<div
id="tooltip-fullscreen"
role="tooltip"
class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700"
data-popper-reference-hidden=""
data-popper-escaped=""
data-popper-placement="bottom"
style="
position: absolute;
inset: 0px auto auto 0px;
margin: 0px;
transform: translate3d(0px, 335px, 0px);
"
>
Show full screen
<div class="tooltip-arrow" data-popper-arrow=""></div>
</div>
</div>
<div
class="py-2 px-4 bg-gray-50 rounded-b-lg dark:bg-gray-700"
>
<textarea
id="description"
rows="8"
class="block px-0 w-full text-sm text-gray-800 bg-gray-50 border-0 dark:bg-gray-700 focus:ring-0 dark:text-white dark:placeholder-gray-400"
placeholder="Write product description here"
required=""
></textarea>
</div>
</div>
</div>
<div class="flex items-center">
<input
id="product-options"
type="checkbox"
value=""
class="w-4 h-4 text-primary-600 bg-gray-100 rounded border-gray-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label
for="product-options"
class="ml-2 text-sm text-gray-500 dark:text-gray-300"
>Product has multiple options, like different colors or
sizes</label
>
</div>
</div>
<!-- Column -->
<div class="space-y-4 sm:space-y-6">
<div>
<label
for="tags"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Tags</label
>
<input
type="text"
name="tags"
id="tags"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="e.g computer, pc"
required=""
/>
</div>
<div>
<label
for="item-weight"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Item Weight (kg)</label
>
<input
type="number"
name="item-weight"
id="item-weight"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="12"
required=""
/>
</div>
<div class="space-y-4 sm:flex sm:space-x-4 sm:space-y-0">
<div class="w-full">
<label
for="length"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Length (cm)</label
>
<input
type="number"
name="length"
id="length"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="105"
required=""
/>
</div>
<div class="w-full">
<label
for="breadth"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Breadth (cm)</label
>
<input
type="number"
name="breadth"
id="breadth"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="15"
required=""
/>
</div>
<div class="w-full">
<label
for="width"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Width (cm)</label
>
<input
type="number"
name="width"
id="width"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="23"
required=""
/>
</div>
</div>
<div>
<label
for="dropzone-file"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Product Images</label
>
<div class="flex justify-center items-center w-full">
<label
for="dropzone-file"
class="flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
>
<div
class="flex flex-col justify-center items-center pt-5 pb-6"
>
<svg
aria-hidden="true"
class="mb-3 w-10 h-10 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
></path>
</svg>
<p
class="mb-2 text-sm text-gray-500 dark:text-gray-400"
>
<span class="font-semibold">Click to upload</span> or
drag and drop
</p>
<p
class="mb-4 text-xs text-gray-500 dark:text-gray-400"
>
Max. File Size: 30MB
</p>
<button
type="button"
class="py-2 px-3 text-xs font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
Extra small
</button>
</div>
<input id="dropzone-file" type="file" class="hidden" />
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<h2 id="create-product-accordion-collapse-heading-2">
<button
type="button"
class="flex justify-between items-center py-4 px-4 w-full font-medium leading-none text-left text-gray-900 bg-gray-50 border-t border-gray-200 sm:px-5 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-600 dark:text-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600"
data-accordion-target="#create-product-accordion-collapse-body-2"
aria-expanded="false"
aria-controls="create-product-accordion-collapse-body-2"
>
<span>Discount</span>
<svg
data-accordion-icon=""
class="w-6 h-6 shrink-0"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
</h2>
<div
id="create-product-accordion-collapse-body-2"
class="hidden"
aria-labelledby="create-product-accordion-collapse-heading-2"
>
<div class="pt-4 border-gray-200 sm:pt-5 dark:border-gray-700">
<!-- Inputs -->
<div class="grid gap-4 md:gap-6 md:grid-cols-2">
<!-- Column -->
<div class="space-y-4 sm:space-y-6">
<div class="space-y-4 sm:flex sm:space-x-4 sm:space-y-0">
<div class="w-full">
<label
for="discount"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Discount Type</label
>
<select
id="discount"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
>
<option selected="">Percent off</option>
<option value="SU">Sum</option>
</select>
</div>
<div class="w-full">
<label
for="minimum-order"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Minimum Order Amount</label
>
<div class="relative">
<div
class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"
>
<svg
aria-hidden="true"
class="w-5 h-5 text-gray-500 dark:text-gray-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"
></path>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z"
clip-rule="evenodd"
></path>
</svg>
</div>
<input
type="number"
id="minimum-order"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="400"
/>
</div>
</div>
</div>
<div class="w-full">
<label
for="discount-worth"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Discount worth</label
>
<div class="relative">
<div
class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"
>
<svg
aria-hidden="true"
class="w-5 h-5 text-gray-500 dark:text-gray-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5zm2.5 3a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm6.207.293a1 1 0 00-1.414 0l-6 6a1 1 0 101.414 1.414l6-6a1 1 0 000-1.414zM12.5 10a1.5 1.5 0 100 3 1.5 1.5 0 000-3z"
clip-rule="evenodd"
></path>
</svg>
</div>
<input
type="number"
id="discount-worth"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="10"
/>
</div>
</div>
<div class="flex items-center">
<input
id="offer-checkbox"
type="checkbox"
value=""
class="w-4 h-4 text-primary-600 bg-gray-100 rounded border-gray-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label
for="offer-checkbox"
class="ml-2 text-sm text-gray-500 dark:text-gray-300"
>I understand that the discount given in this offer will be
borne by me</label
>
</div>
</div>
<!-- Column -->
<div>
<label
for="datepicker"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Offer Validity Period</label
>
<div
date-rangepicker=""
class="items-center space-y-4 w-full sm:flex sm:space-x-4 sm:space-y-0"
>
<div class="relative w-full">
<div
class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"
>
<svg
aria-hidden="true"
class="w-5 h-5 text-gray-500 dark:text-gray-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
clip-rule="evenodd"
></path>
</svg>
</div>
<input
id="datepicker"
name="start"
type="text"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 datepicker-input"
placeholder="Select date start"
/>
</div>
<div class="relative w-full">
<div
class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"
>
<svg
aria-hidden="true"
class="w-5 h-5 text-gray-500 dark:text-gray-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
clip-rule="evenodd"
></path>
</svg>
</div>
<input
name="end"
type="text"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 datepicker-input"
placeholder="Select date end"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button
type="submit"
class="inline-flex items-center px-5 py-2.5 mt-4 sm:mt-6 text-sm font-medium text-center text-white bg-primary-700 rounded-lg focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-900 hover:bg-primary-800"
>
Add product
</button>
</form>
</div>
</section>
<script src="https://unpkg.com/flowbite@1.5.3/dist/datepicker.js"></script>Advanced create user form
Use this example to create a user data entry inside your dashboard based on this advanced CRUD create form layout featuring multiple text, select, email, search, and file upload input fields.
Advanced create user form
html
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-2xl lg:py-16">
<form action="#">
<h2
class="mb-4 text-xl font-semibold leading-none text-gray-900 dark:text-white"
>
General Information
</h2>
<div class="grid gap-4 mb-4 md:gap-6 md:grid-cols-2 sm:mb-8">
<div class="sm:col-span-2">
<label
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
for="file_input"
>Upload avatar</label
>
<div class="items-center w-full sm:flex">
<img
class="mb-4 w-20 h-20 rounded-full sm:mr-4 sm:mb-0"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/helene-engels.png"
alt="Helene avatar"
/>
<div class="w-full">
<input
class="w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
aria-describedby="file_input_help"
id="file_input"
type="file"
/>
<p
class="mt-1 text-xs font-normal text-gray-500 dark:text-gray-300"
id="file_input_help"
>
SVG, PNG, JPG or GIF (MAX. 800x400px).
</p>
</div>
</div>
</div>
<div>
<label
for="first-name"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>First Name</label
>
<input
type="text"
name="first-name"
id="first-name"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="First Name"
required=""
/>
</div>
<div>
<label
for="last-name"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Last Name</label
>
<input
type="text"
name="last-name"
id="last-name"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Last Name"
required=""
/>
</div>
<div>
<label
for="email"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Email</label
>
<input
type="email"
name="email"
id="email"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="name@company.com"
required=""
/>
</div>
<div>
<label
for="user-permissions"
class="inline-flex items-center mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
User Permissions
<button
type="button"
data-tooltip-target="tooltip-dark"
data-tooltip-style="dark"
class="ml-1"
>
<svg
aria-hidden="true"
class="w-4 h-4 text-gray-400 hover:text-gray-900 dark:text-gray-500 dark:hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Show information</span>
</button>
<div
id="tooltip-dark"
role="tooltip"
class="inline-block absolute invisible z-10 py-2 px-3 max-w-sm text-xs font-normal text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
>
User permissions, part of the overall user management process, are
access granted to users to specific resources such as files,
applications, networks, or devices.
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</label>
<select
id="user-permissions"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
>
<option selected="">Operational</option>
<option value="NO">Non Operational</option>
</select>
</div>
<div>
<label
for="email-status"
class="inline-flex items-center mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Email Status
<button
type="button"
data-tooltip-target="tooltip-email-status"
data-tooltip-style="dark"
class="ml-1"
>
<svg
aria-hidden="true"
class="w-4 h-4 text-gray-400 hover:text-gray-900 dark:text-gray-500 dark:hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Show information</span>
</button>
<div
id="tooltip-email-status"
role="tooltip"
class="inline-block absolute invisible z-10 py-2 px-3 max-w-sm text-xs font-normal text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
>
As an administrator, you can view the status of a user's email.
The status indicates whether a user's email is verified or not.
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</label>
<select
id="email-status"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
>
<option selected="">Not verified</option>
<option value="VE">Verified</option>
</select>
</div>
<div>
<label
for="job-title"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Job Title</label
>
<input
type="text"
name="job-title"
id="job-title"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="e.g React Native Developer"
required=""
/>
</div>
<div>
<label
for="user-role"
class="inline-flex items-center mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
User Role
<button
type="button"
data-tooltip-target="tooltip-user-role"
data-tooltip-style="dark"
class="ml-1"
>
<svg
aria-hidden="true"
class="w-4 h-4 text-gray-400 hover:text-gray-900 dark:hover:text-white dark:text-gray-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Show information</span>
</button>
<div
id="tooltip-user-role"
role="tooltip"
class="inline-block absolute invisible z-10 py-2 px-3 max-w-sm text-xs font-normal text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
>
Flowbite provides 7 predefined roles: Owner, Admin, Editor,
Contributor and Viewer. Assign the most suitable role to each
user, giving them the most appropriate level of control.
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</label>
<select
id="user-role"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
>
<option selected="">Owner</option>
<option value="AD">Admin</option>
<option value="ED">Editor</option>
<option value="CO">Contributor</option>
<option value="VI">Viewer</option>
</select>
</div>
<div>
<label
for="account"
class="inline-flex items-center mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Account
<button
type="button"
data-tooltip-target="tooltip-account"
data-tooltip-style="dark"
class="ml-1"
>
<svg
aria-hidden="true"
class="w-4 h-4 text-gray-400 hover:text-gray-900 dark:hover:text-white dark:text-gray-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Show information</span>
</button>
<div
id="tooltip-account"
role="tooltip"
class="inline-block absolute invisible z-10 py-2 px-3 max-w-sm text-xs font-normal text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
>
Choose here your account type.
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</label>
<select
id="account"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
>
<option selected="">Choose account type</option>
<option value="DF">Default Account</option>
<option value="PRO">PRO Account</option>
</select>
</div>
<div>
<label
for="password"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Password</label
>
<input
type="password"
name="password"
id="password"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="•••••••••"
required=""
/>
</div>
<div>
<label
for="confirm-password"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Confirm password</label
>
<input
type="password"
name="confirm-password"
id="confirm-password"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="•••••••••"
required=""
/>
</div>
<div class="sm:col-span-2">
<label
for="biography"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Biography</label
>
<div
class="w-full bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-700 dark:border-gray-600"
>
<div
class="flex justify-between items-center py-2 px-3 border-b dark:border-gray-600"
>
<div
class="flex flex-wrap items-center divide-gray-200 sm:divide-x dark:divide-gray-600"
>
<div class="flex items-center space-x-1 sm:pr-4">
<button
type="button"
class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Attach file</span>
</button>
<button
type="button"
class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Embed map</span>
</button>
<button
type="button"
class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Upload image</span>
</button>
<button
type="button"
class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Format code</span>
</button>
<button
type="button"
class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zm-.464 5.535a1 1 0 10-1.415-1.414 3 3 0 01-4.242 0 1 1 0 00-1.415 1.414 5 5 0 007.072 0z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Add emoji</span>
</button>
</div>
<div
class="hidden flex-wrap items-center space-x-1 sm:flex sm:pl-4"
>
<button
type="button"
class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Add list</span>
</button>
<button
type="button"
class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Settings</span>
</button>
<button
type="button"
class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Timeline</span>
</button>
<button
type="button"
class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Download</span>
</button>
</div>
</div>
<button
type="button"
data-tooltip-target="tooltip-fullscreen"
class="p-2 text-gray-500 rounded cursor-pointer sm:ml-auto hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 4a1 1 0 011-1h4a1 1 0 010 2H6.414l2.293 2.293a1 1 0 11-1.414 1.414L5 6.414V8a1 1 0 01-2 0V4zm9 1a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V6.414l-2.293 2.293a1 1 0 11-1.414-1.414L13.586 5H12zm-9 7a1 1 0 012 0v1.586l2.293-2.293a1 1 0 111.414 1.414L6.414 15H8a1 1 0 010 2H4a1 1 0 01-1-1v-4zm13-1a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 010-2h1.586l-2.293-2.293a1 1 0 111.414-1.414L15 13.586V12a1 1 0 011-1z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Full screen</span>
</button>
<div
id="tooltip-fullscreen"
role="tooltip"
class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700"
data-popper-reference-hidden=""
data-popper-escaped=""
data-popper-placement="bottom"
style="
position: absolute;
inset: 0px auto auto 0px;
margin: 0px;
transform: translate3d(0px, 335px, 0px);
"
>
Show full screen
<div class="tooltip-arrow" data-popper-arrow=""></div>
</div>
</div>
<div class="py-2 px-4 bg-white rounded-b-lg dark:bg-gray-800">
<textarea
id="biography"
rows="8"
class="block px-0 w-full text-sm text-gray-800 bg-white border-0 dark:bg-gray-800 focus:ring-0 dark:text-white dark:placeholder-gray-400"
placeholder="Write a message here"
required=""
></textarea>
</div>
</div>
</div>
<div>
<label
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
for="file_input"
>Assign Role</label
>
<div class="flex items-center space-x-4">
<div class="flex items-center">
<input
id="inline-checkbox"
type="checkbox"
value=""
name="role_checkbox"
class="w-4 h-4 text-primary-600 bg-gray-100 rounded border-gray-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label
for="inline-checkbox"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>Administrator</label
>
</div>
<div class="flex items-center">
<input
id="inline-2-checkbox"
type="checkbox"
value=""
name="role_checkbox"
class="w-4 h-4 text-primary-600 bg-gray-100 rounded border-gray-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label
for="inline-2-checkbox"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>Member</label
>
</div>
<div class="flex items-center">
<input
checked=""
id="inline-checked-checkbox"
type="checkbox"
value=""
name="role_checkbox"
class="w-4 h-4 text-primary-600 bg-gray-100 rounded border-gray-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label
for="inline-checked-checkbox"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>Viewer</label
>
</div>
</div>
</div>
</div>
<h2
class="mb-4 text-xl font-semibold leading-none text-gray-900 dark:text-white"
>
Additional Information
</h2>
<div class="grid gap-4 mb-4 md:gap-6 md:grid-cols-2 sm:mb-8">
<div>
<label
for="country"
class="mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Country</label
>
<select
id="country"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
>
<option selected="">United States</option>
<option value="NO">Australia</option>
<option value="NO">United Kingdom</option>
<option value="NO">Italy</option>
<option value="NO">Germany</option>
<option value="NO">Spain</option>
<option value="NO">France</option>
<option value="NO">Canada</option>
</select>
</div>
<div>
<label
for="city"
class="mb-2 text-sm font-medium text-gray-900 dark:text-white"
>City</label
>
<select
id="city"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
>
<option selected="">San Francisco</option>
<option value="WA">Washington</option>
<option value="NW">New York</option>
<option value="SA">Sacramento</option>
</select>
</div>
<div>
<label
for="address"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Address</label
>
<input
type="text"
name="address"
id="adress"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Your Location"
required=""
/>
</div>
<div>
<label
for="zip"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>ZIP</label
>
<input
type="number"
name="zip"
id="zip"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Your Location"
required=""
/>
</div>
<div>
<label
for="timezone"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Timezone</label
>
<input
type="text"
name="timezone"
id="timezone"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="e.g GMT -6"
required=""
/>
</div>
<div>
<label
for="phone-number"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Phone Number</label
>
<input
type="number"
name="phone-number"
id="phone-number"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Add a phone number"
required=""
/>
</div>
<div>
<label
for="linkedin"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Linkedin URL</label
>
<input
type="url"
name="linkedin"
id="linkedin"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Linkedin URL"
required=""
/>
</div>
<div>
<label
for="facebook"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Facebook</label
>
<input
type="url"
name="facebook"
id="facebook"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Facebook Profile"
required=""
/>
</div>
<div>
<label
for="github"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Github</label
>
<input
type="url"
name="github"
id="github"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Github Username"
required=""
/>
</div>
<div>
<label
for="dribbble"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Dribbble</label
>
<input
type="url"
name="dribbble"
id="dribbble"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Dribbble Username"
required=""
/>
</div>
<div>
<label
for="instagram"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Instagram</label
>
<input
type="url"
name="instagram"
id="instagram"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Instagram Username"
required=""
/>
</div>
<div>
<label
for="personal-website"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Personal Website</label
>
<input
type="url"
name="personal-website"
id="personal-website"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="http://www.example.com"
required=""
/>
</div>
</div>
<button
type="submit"
class="inline-flex items-center px-5 py-2.5 text-sm font-medium text-center text-white bg-primary-700 rounded-lg focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-900 hover:bg-primary-800"
>
Add user
</button>
</form>
</div>
</section>