<form>
<div class="form-group mb-4">
<label class="label text-secondary fs-14">Description</label>
<div id="standalone-container">
<div id="toolbar-container" class="rounded-top-2">
<span class="ql-formats">
<select class="ql-font"></select>
<select class="ql-size"></select>
</span>
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
</span>
<span class="ql-formats">
<button class="ql-blockquote"></button>
<button class="ql-code-block"></button>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
<button class="ql-indent" value="-1"></button>
<button class="ql-indent" value="+1"></button>
</span>
<span class="ql-formats">
<button class="ql-link"></button>
<button class="ql-image"></button>
<button class="ql-video"></button>
</span>
</div>
<div id="editor-container" style="height: 250px; border-color: #D5D9E2;" class="rounded-bottom-2"></div>
</div>
</div>
<div class="form-group">
<div class="d-flex flex-wrap gap-3 align-items-center">
<button class="btn btn-primary text-white fw-semibold py-2 px-4 me-4" type="submit">
Send
</button>
<div class="position-relative top-3 d-flex align-items-baseline flex-wrap gap-sm-0">
<button class="p-0 border-0 bg-transparent" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Text">
<i class="material-symbols-outlined fs-20 text-body hover">text_fields_alt</i>
</button>
<button class="p-0 border-0 bg-transparent ms-3" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="File">
<i class="material-symbols-outlined fs-20 text-body hover">attach_file</i>
</button>
<button class="p-0 border-0 bg-transparent ms-3" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Link">
<i class="material-symbols-outlined fs-20 text-body hover">link</i>
</button>
<button class="p-0 border-0 bg-transparent ms-3" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Mood">
<i class="material-symbols-outlined fs-20 text-body hover">mood</i>
</button>
<button class="p-0 border-0 bg-transparent ms-3" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Drive">
<i class="material-symbols-outlined fs-20 text-body hover">add_to_drive</i>
</button>
<button class="p-0 border-0 bg-transparent ms-3" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Pen">
<i class="material-symbols-outlined fs-20 text-body hover">ink_pen</i>
</button>
<div class="dropdown action-opt ms-3 position-relative top-2" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="More Option">
<button class="p-0 border-0 bg-transparent" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="material-symbols-outlined fs-20 text-body hover">more_vert</i>
</button>
<ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
<li>
<a class="dropdown-item" href="javascript:void(0);">
<i data-feather="eye"></i>
View All
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">
<i data-feather="trash-2"></i>
Delete One
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">
<i data-feather="lock"></i>
Block
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</form>