Pick from Our Library - Done
HTML
<div data-w-tab="Library" class="tab-pane no-padding w-tab-pane w--tab-active">
<form id="image-library" name="image-library" data-name="image-library" method="post" class="form" >
<div class="image-library-picker">
<div class="field-label-container">
<div class="field-label">Choose from Our Library</div>
</div>
<div class="w-layout-grid thumbnail-grid">
<!-- START Library Images -->
<div class="image-picker-item">
<img alt="{filename}" src="{image}" loading="lazy" class="image-picker-gallery-image image-picker-gallery-selected"> <!-- selected image -->
</div>
<div class="image-picker-item">
<img alt="{filename}" src="{image}" loading="lazy" class="image-picker-gallery-image">
</div>
<!-- END Library Images -->
</div>
<div class="image-gallery-under">
<div class="w-layout-grid image-gallery-filter-container">
<div data-delay="0" data-hover="false" class="dropdown w-dropdown">
<div class="dropdown-closed w-dropdown-toggle">
<div class="filter-dropdown-arrow w-icon-dropdown-toggle"></div>
<div class="dropdown-text-content placeholder">All Categories...</div>
</div>
<nav class="dropdown-open top w-dropdown-list">
<div class="dropdown-option-container">
<!-- START Dropdown Options for Category Filter -->
<a href="#" class="dropdown-option-simple w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
</div>
<div class="dropdown-option-text">Animals</div>
</a>
<a href="#" class="dropdown-option-simple w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon selected w-embed"> <!-- .selected class added to show selection option indicator -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
</div>
<div class="dropdown-option-text">Robots</div>
</a>
<!-- END Dropdown Options for Category Filter -->
</div>
</nav>
</div>
<input class="form-field w-input" maxlength="256" name="filter-library" data-name="filter-library" placeholder="Search Images..." type="text" id="filter-library">
</div>
<div class="image-picker-pagination">
<div class="pagination-pages-dropdown no-border">
<div data-delay="0" data-hover="false" class="w-dropdown">
<div class="dropdown-closed pagination-page-number w-dropdown-toggle">
<div class="dropdown-arrow w-icon-dropdown-toggle"></div>
<div class="dropdown-text">3</div>
</div>
<div class="dropdown-open top w-dropdown-list">
<div class="dropdown-options">
<a href="#" class="dropdown-option No Selected w-inline-block">
<div class="dropdown-option-text">1</div>
</a>
<a href="#" class="dropdown-option No Selected w-inline-block">
<div class="dropdown-option-text">2</div>
</a>
<a href="#" class="dropdown-option No Selected w-inline-block">
<div class="dropdown-option-text">3</div>
</a>
</div>
</div>
</div>
<div>of 11 pages</div>
</div>
<div class="pagination-button">
<div class="pagination-icon w-embed">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32" xml:space="preserve"><polygon points="20,24 10,16 20,8 "></polygon></svg>
</div>
</div>
<div class="pagination-button">
<div class="pagination-icon w-embed">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32" xml:space="preserve"><polygon points="12,8 22,16 12,24 "></polygon></svg>
</div>
</div>
</div>
</div>
</div>
<div class="form-button-container">
<a href="#" class="button tertiary full w-button">Cancel</a>
<a href="#" class="button full w-button">Save</a>
</div>
</form>
</div>